diff --git a/left.js b/left.js
new file mode 100644
index 000000000..fc6d4ee64
--- /dev/null
+++ b/left.js
@@ -0,0 +1,253 @@
+/* $Id$ */
+
+// These scripts were originally found on cooltype.com.
+// Modified 01/01/1999 by Tobias Ratschiller for linuxapps.com
+
+// Modified 7th June 2000 by Brian Birtles for Mozilla 5.0
+// compatibility for phpMyAdmin
+
+// Rewritten and put in a libray 2nd May 2001 by Loïc Chapeaux
+
+// Test passed with:
+// - Mozilla 0.8.1 for Windows (js enabled & disabled)
+// - IE5, 5.01, 5.5 for Windows
+// - Netscape 4.75 for Windows
+// - Opera 5.02 for windows (js disabled)
+
+// Test failed with:
+// - Opera 5.02 for windows with js enabled -> crappy DOM implementation
+//   ('getElementsByTagName' is unsupported), nothing to do :(
+
+
+var isExpanded   = false;
+
+var imgOpened    = new Image(9,9);
+imgOpened.src    = 'images/minus.gif';
+var imgClosed    = new Image(9,9);
+imgClosed.src    = 'images/plus.gif';
+
+
+/**
+ * Do reloads the frame if the window has been resized under Netscape4+
+ *
+ * @access  private
+ */
+function reDo() {
+  if (innerWidth != origWidth || innerHeight != origHeight)
+    location.reload(true);
+} // end of the 'reDo()' function
+
+/**
+ * Positioned element resize bug under NS4+
+ */
+if (isNS4) {
+  var origWidth  = innerWidth;
+  var origHeight = innerHeight;
+  onresize       = reDo;
+}
+
+
+/**
+ * Specific stuffs for IE4
+ */
+function doDocumentOnMouseOver() {
+  var eSrc = window.event.srcElement ;
+  if (eSrc.className == 'item') {
+    window.event.srcElement.className = 'highlight';
+  }
+} // end of the 'doDocumentOnMouseOver()' function
+
+function doDocumentOnMouseOut() {
+  var eSrc = window.event.srcElement ;
+  if (eSrc.className == 'highlight') {
+    window.event.srcElement.className = 'item';
+  }
+} // end of the 'doDocumentOnMouseOut()' function
+
+if (isIE4) {
+  document.onmouseover = doDocumentOnMouseOver ;
+  document.onmouseout = doDocumentOnMouseOut ;
+}
+
+
+/**
+ * Gets the id of the first collapsible room
+ *
+ * @param  string  the name of the first collapsible room
+ *
+ * @return  integer  the index number corresponding to this room
+ *
+ * @access  public
+ */
+function nsGetIndex(el) {
+  var ind       = null;
+  var layersCnt = document.layers.length;
+  for (var i = 0; i < layersCnt; i++) {
+    var whichEl = document.layers[i];
+    if (whichEl.id == el) {
+      ind = i;
+      break;
+    }
+  }
+  return ind;
+} // end of the 'nsGetIndex()' function
+
+
+/**
+ * Positions layers under NS4+
+ *
+ * @access  public
+ */
+function nsArrangeList() {
+  if (firstInd != null) {
+    var nextY     = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
+    var layersCnt = document.layers.length;
+    for (var i = firstInd + 1; i < layersCnt; i++) {
+      var whichEl = document.layers[i];
+      if (whichEl.visibility != 'hide') {
+        whichEl.pageY = nextY;
+        nextY         += whichEl.document.height;
+      }
+    }
+  }
+} // end of the 'nsArrangeList()' function
+
+
+/**
+ * Collapses databases at startup
+ *
+ * @access  public
+ */
+function initIt()
+{
+  if (!capable)
+    return;
+
+  if (isDOM) {
+    var tempColl    = document.getElementsByTagName('DIV');
+    var tempCollCnt = tempColl.length;
+    for (var i = 0; i < tempCollCnt; i++) {
+      if (tempColl[i].className == 'child')
+        tempColl[i].style.display = 'none';
+    }
+  } // end of the DOM case
+  else if (isIE4) {
+    tempColl        = document.all.tags('DIV');
+    var tempCollCnt = tempColl.length;
+    for (var i = 0; i < tempCollCnt; i++) {
+      if (tempColl(i).className == 'child')
+        tempColl(i).style.display = 'none';
+    }
+  } // end of the IE4 case
+  else if (isNS4) {
+    var layersCnt   = document.layers.length;
+    for (var i=0; i<layersCnt; i++) {
+      var whichEl = document.layers[i];
+      if (whichEl.id.indexOf('Child') != -1)
+        whichEl.visibility        = 'hide';
+      else
+        whichEl.visibility        = 'show';
+    }
+    nsArrangeList();
+  } // end of the NS4 case
+} // end of the 'initIt()' function
+
+
+/**
+ * Collapses/expands a database when the user require this to be done
+ *
+ * @param  string  the  name of the room to act on
+ * @param  boolean whether to expand or to collapse the database content
+ *
+ * @access  public
+ */
+function expandBase(el, unexpand)
+{
+  if (!capable)
+    return;
+
+  if (isDOM) {
+    var whichEl = document.getElementById(el + 'Child');
+    var whichIm = document.getElementById(el + 'Img');
+    if (whichEl.style.display == 'none') {
+      whichEl.style.display  = 'block';
+      whichIm.src            = imgOpened.src;
+    }
+    else if (unexpand) {
+      whichEl.style.display  = 'none';
+      whichIm.src            = imgClosed.src;
+    }
+  } // end of the DOM case
+  else if (isIE4) {
+    var whichEl = document.all(el + 'Child');
+    var whichIm = document.images.item(el + 'Child');
+    if (whichEl.style.display == 'none') {
+      whichEl.style.display  = 'block';
+      whichIm.src            = imgOpened.src;
+    }
+    else if (unexpand) {
+      whichEl.style.display  = 'none';
+      whichIm.src            = imgClosed.src;
+    }
+  } // end of the IE4 case
+  else if (isNS4) {
+    var whichEl = document.layers[el + 'Child'];
+    var whichIm = document.layers[el + 'Parent'].document.images['imEx'];
+    if (whichEl.visibility == 'hide') {
+      whichEl.visibility  = 'show';
+      whichIm.src         = imgOpened.src;
+    }
+    else if (unexpand) {
+      whichEl.visibility  = 'hide';
+      whichIm.src         = imgClosed.src;
+    }
+    nsArrangeList();
+  } // end of the NS4 case
+} // end of the 'expandBase()' function
+
+
+/**
+ * Add styles for positioned layers
+ */
+if (capable) {
+  with (document) {
+    // Brian Birtles : This is not the ideal method of doing this
+    // but under the 7th June '00 Mozilla build (and many before
+    // it) Mozilla did not treat text between <style> tags as
+    // style information unless it was written with the one call
+    // to write().
+    if (isDOM) {
+      var lstyle = '<style type="text/css">'
+                 + '.parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; display:block}'
+                 + '.child {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; display:none}'
+                 + '.item { color: darkblue; text-decoration:none; font-size: 8pt;}'
+                 + '.highlight { color: red; font-size: 8pt;}'
+                 + '.heada { font: 12px\/13px; Times}'
+                 + 'DIV { color:black; }'
+                 + '<\/style>';
+      write(lstyle);
+    }
+    else {
+      write('<style type="text/css">');
+      if (isIE4) {
+        write('.parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none;}');
+        write('.child {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; display:none}');
+        write('.item { color: darkblue; text-decoration:none; font-size: 8pt;}');
+        write('.highlight { color: red; font-size: 8pt;}');
+        write('.heada { font: 12px\/13px; Times}');
+        write('DIV { color:black; }');
+      }
+      else {
+        write('.parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; position:absolute; visibility:hidden; color: black;}');
+        write('.child {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt;color: #000000; position:absolute; visibility:hidden}');
+        write('.item { color: darkblue; text-decoration:none;}');
+        write('.regular {font-family: Arial,Helvetica,sans-serif; position:absolute; visibility:hidden}');
+        write('DIV { color:black; }');
+      }
+      write('<\/style>');
+    }
+  }
+} // end of adding styles
+
+
+onload = initIt;
diff --git a/left.php3 b/left.php3
index 0b1555636..d8f925215 100755
--- a/left.php3
+++ b/left.php3
@@ -7,259 +7,22 @@ require("lib.inc.php3");
 <html>
 <head>
 <title>phpMyAdmin</title>
-
- <script LANGUAGE="JavaScript" type="text/javascript">
-   <!--
-  // These scripts were originally found on cooltype.com.
-  // Modified 01/01/1999 by Tobias Ratschiller for linuxapps.com
-
-  // Modified 7th June 2000 by Brian Birtles for Mozilla 5.0
-  // compatibility for phpMyAdmin
-
-  document.onmouseover = doDocumentOnMouseOver ;
-  document.onmouseout = doDocumentOnMouseOut ;
-
-  function doDocumentOnMouseOver() {
-    var eSrc = window.event.srcElement ;
-    if (eSrc.className == "item") {
-      window.event.srcElement.className = "highlight";
-    }
-  }
-
-  function doDocumentOnMouseOut() {
-    var eSrc = window.event.srcElement ;
-    if (eSrc.className == "highlight") {
-      window.event.srcElement.className = "item";
-    }
-  }
-
-
-var bV=parseInt(navigator.appVersion);
-NS4=(document.layers) ? true : false;
-IE4=((document.all)&&(bV>=4)) ? true : false;
-DOM=(!document.layers && !document.all && bV>=4) ? true : false; // A hack to guess if the browser supports the DOM
-capable = (NS4 || IE4 || DOM) ? true : false;
-
-function expandIt(){return}
-function expandAll(){return}
-//-->
-</script>
-
-<script language="JavaScript1.2" type="text/javascript">
+<base target="phpmain" />
+<!-- Collapsible tables list -->
+<script type="text/javascript" language="javascript1.2">
 <!--
-isExpanded = false;
-
-function getIndex(el) {
-  ind = null;
-  for (i=0; i<document.layers.length; i++) {
-    whichEl = document.layers[i];
-    if (whichEl.id == el) {
-      ind = i;
-      break;
-    }
-  }
-  return ind;
-}
-
-function arrange() {
-  nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
-  for (i=firstInd+1; i<document.layers.length; i++) {
-    whichEl = document.layers[i];
-    if (whichEl.visibility != "hide") {
-      whichEl.pageY = nextY;
-      nextY += whichEl.document.height;
-    }
-  }
-}
-
-function initIt() {
-  if (NS4) {
-    for (i=0; i<document.layers.length; i++) {
-      whichEl = document.layers[i];
-      if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
-    }
-    arrange();
-  } else if(IE4) {
-    tempColl = document.all.tags("DIV");
-    for (i=0; i<tempColl.length; i++) {
-      if (tempColl(i).className == "child") tempColl(i).style.display = "none";
-    }
-  } else if(DOM) {
-    tempColl = document.getElementsByTagName("DIV");
-    for (i=0; i<tempColl.length; i++) {
-      if (tempColl(i).className == "child") tempColl(i).style.visibility = "hidden";
-    }
-  }
-}
-
-function expandIt(el, unexpand) {
-  if (!capable) return;
-  if (IE4) {
-    expandIE(el, unexpand);
-  } else if(NS4) {
-    expandNS(el, unexpand);
-  } else if(DOM) {
-    expandDOM(el, unexpand);
-  }
-}
-
-function expandIE(el, unexpand) {
-  whichEl = eval(el + "Child");
-
-        // Modified Tobias Ratschiller 01-01-99:
-        // event.srcElement obviously only works when clicking directly
-        // on the image. Changed that to use the images's ID instead (so
-        // you've to provide a valid ID!).
-
-  //whichIm = event.srcElement;
-        whichIm = eval(el+"Img");
-
-  if (whichEl.style.display == "none") {
-    whichEl.style.display = "block";
-    whichIm.src = "images/minus.gif";
-  }
-  else {
-    if (unexpand) {
-      whichEl.style.display = "none";
-      whichIm.src = "images/plus.gif";
-    }
-  }
-    window.event.cancelBubble = true ;
-}
-
-function expandNS(el, unexpand) {
-  whichEl = eval("document." + el + "Child");
-  whichIm = eval("document." + el + "Parent.document.images['imEx']");
-  if (whichEl.visibility == "hide") {
-    whichEl.visibility = "show";
-    whichIm.src = "images/minus.gif";
-  } else {
-    if (unexpand) {
-      whichEl.visibility = "hide";
-      whichIm.src = "images/plus.gif";
-    }
-  }
-  arrange();
-}
-
-function expandDOM(el, unexpand) {
-
-  whichEl = document.getElementById(el + "Child");
-    whichIm = document.getElementById(el + "Img");
-
-  if (whichEl.style.visibility != "visible") {
-    whichEl.style.visibility = "visible";
-    whichIm.src = "images/minus.gif";
-  } else {
-    if (unexpand) {
-      whichEl.style.visibility = "hidden";
-      whichIm.src = "images/plus.gif";
-    }
-  }
-
-}
-
-function showAll() {
-  for (i=firstInd; i<document.layers.length; i++) {
-    whichEl = document.layers[i];
-    whichEl.visibility = "show";
-  }
-}
-
-function expandAll(isBot) {
-  // Brian Birtles 7-Jun-00 : This fn might be unnecessary (for phpMyAdmin).
-  // My changes are certainly untested.
-  newSrc = (isExpanded) ? "images/plus.gif" : "images/minus.gif";
-
-  if (NS4) {
-        // TR-02-01-99: Don't need that
-        // document.images["imEx"].src = newSrc;
-    for (i=firstInd; i<document.layers.length; i++) {
-      whichEl = document.layers[i];
-      if (whichEl.id.indexOf("Parent") != -1) {
-        whichEl.document.images["imEx"].src = newSrc;
-      }
-      if (whichEl.id.indexOf("Child") != -1) {
-        whichEl.visibility = (isExpanded) ? "hide" : "show";
-      }
-    }
-
-    arrange();
-   if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
-  } else if(IE4) {
-    divColl = document.all.tags("DIV");
-    for (i=0; i<divColl.length; i++) {
-      if (divColl(i).className == "child") {
-        divColl(i).style.display = (isExpanded) ? "none" : "block";
-      }
-    }
-    imColl = document.images.item("imEx");
-    for (i=0; i<imColl.length; i++) {
-      imColl(i).src = newSrc;
-    }
-  } else if(DOM) {
-    divColl = document.getElementsByTagName("DIV");
-    for (i=0; i<divColl.length; i++) {
-      if (divColl(i).className == "child") {
-        divColl(i).style.visibility = (isExpanded) ? "hidden" : "visible";
-      }
-    }
-    imColl = document.getElementsByName("imEx");
-    for (i=0; i<imColl.length; i++) {
-      imColl(i).src = newSrc;
-    }
-  }
-
-  isExpanded = !isExpanded;
-}
-
-with (document) {
-  if(DOM) {
-    // Brian Birtles : This is not the ideal method of doing this
-    // but under the 7th June '00 Mozilla build (and many before
-    // it) Mozilla did not treat text between <style> tags as
-    // style information unless it was written with the one call
-    // to write().
-    var lstyle = "<style type='text/css'>";
-    lstyle += ".child {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; visibility:hidden}";
-    lstyle += ".parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none;}";
-    lstyle += ".item { color: darkblue; text-decoration:none; font-size: 8pt;}";
-    lstyle += ".highlight { color: red; font-size: 8pt;}";
-    lstyle += ".heada { font: 12px/13px; Times}";
-    lstyle += "DIV { color:black; }";
-    lstyle += "</style>";
-    write(lstyle);
-  } else {
-    write("<style type='text/css'>");
-    if (NS4) {
-            write(".parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; position:absolute; visibility:hidden; color: black;}");
-            write(".child {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt;color: #000000; position:absolute; visibility:hidden}");
-            write(".item { color: darkblue; text-decoration:none;}");
-            write(".regular {font-family: Arial,Helvetica,sans-serif; position:absolute; visibility:hidden}");
-            write("DIV { color:black; }");
-    } else if(IE4) {
-            write(".child {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; display:none}");
-            write(".parent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none;}");
-            write(".item { color: darkblue; text-decoration:none; font-size: 8pt;}");
-            write(".highlight { color: red; font-size: 8pt;}");
-            write(".heada { font: 12px/13px; Times}");
-            write("DIV { color:black; }");
-    }
-    write("</style>");
-  }
-}
-
-onload = initIt;
-
+var isDOM        = (typeof(document.getElementById) != 'undefined') ? 1 : 0;
+var isIE4        = ((typeof(document.all) != 'undefined') && (parseInt(navigator.appVersion) >= 4)) ? 1 : 0;
+var isNS4        = (typeof(document.layers) != 'undefined') ? 1 : 0;
+var capable      = (isDOM || isIE4 || isNS4) ? 1 : 0;
 //-->
 </script>
-<base target="phpmain">
+<script src="left.js" type="text/javascript" language="javascript1.2"></script>
 <style type="text/css">
-//<!--
+<!--
 body {  font-family: Arial, Helvetica, sans-serif; font-size: 10pt}
 //-->
 </style>
-
 </head>
 
 <body bgcolor="#D0DCE0">
@@ -294,9 +57,9 @@ if($server > 0)
     $j = $i + 2;
     ?>
       <div ID="el<?php echo $j;?>Parent" CLASS="parent">
-      <a class="item" HREF="db_details.php3?server=<?php echo $server;?>&lang=<?php echo $lang;?>&db=<?php echo $db;?>" onClick="expandIt('el<?php echo $j;?>', true); return false;">
+      <a class="item" HREF="db_details.php3?server=<?php echo $server;?>&lang=<?php echo $lang;?>&db=<?php echo $db;?>" onClick="expandBase('el<?php echo $j;?>', true); return false;">
       <img NAME="imEx" SRC="images/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el<?php echo $j;?>Img"></a>
-      <a class="item" HREF="db_details.php3?server=<?php echo $server;?>&lang=<?php echo $lang;?>&db=<?php echo $db;?>" onClick="expandIt('el<?php echo $j;?>', false);">
+      <a class="item" HREF="db_details.php3?server=<?php echo $server;?>&lang=<?php echo $lang;?>&db=<?php echo $db;?>" onClick="expandBase('el<?php echo $j;?>', false);">
       <font color="black" class="heada">
     <?php echo $db;?>
       </font></a>
@@ -317,13 +80,12 @@ if($server > 0)
         echo "</div>\n";
 }
     ?>
-    <script LANGUAGE="JavaScript1.2">
+    <script type="text/javascript" language="javascript1.2">
     <!--
-    if (NS4) {
-      firstEl = "el1Parent";
-      firstInd = getIndex(firstEl);
-      showAll();
-      arrange();
+    if (isNS4) {
+      firstEl  = 'el1Parent';
+      firstInd = nsGetIndex(firstEl);
+      nsArrangeList();
     }
     //-->
     </script>