var tableWidth = sectionCellWidth * sectionNames.length;
var halfSectionCellWidth = sectionCellWidth/2;
var halfTableWidth = tableWidth/2;

//This value sets the height of each menu row - This should not need to be changed unless changing font size
var sideMenuItemHeight = 13;

//Change this value if necessary to set the with of the Side Menu
var sideMenuWidth = subMenuWidth + 22;

function highlightSideItem(itemID)
{

   if (navigator.appName == "Netscape")
   {
      eval("document.getElementById('" + itemID + "').className = 'sideMenuSelected'");
      eval("document.getElementById('" + itemID + "Link').className = 'sideMenuItemSelected'");
   }
   else
   {
      eval("document.all['" + itemID + "'].className = 'sideMenuSelected'");
      eval("document.all['" + itemID + "Link'].className = 'sideMenuItemSelected'");
   }
}

function unHighlightSideItem(itemID)
{

   if (navigator.appName == "Netscape")
   {
      eval("document.getElementById('" + itemID + "').className = 'sideMenu'");
      eval("document.getElementById('" + itemID + "Link').className = 'sideMenuItem'");
   }
   else
   {
      eval("document.all['" + itemID + "'].className = 'sideMenu'");
      eval("document.all['" + itemID + "Link'].className = 'sideMenuItem'");
   }
}

//Only create submenu if this section has one
var subItems = subMenuNames[currentSection-1];
var subLinks = subMenuLinks[currentSection-1];

if(subItems.length > 0)
{
   //This is the table for the whole left column of the page
   document.write("<table height='100%' width='" + sideMenuWidth  + "' cellpadding='0' cellspacing='0' border='0'>");
   document.write("<tr height='12'><td class='tiny'>&nbsp;</td></tr>");
   document.write("<tr><td valign='top'>");


   //This is the menu position table
   document.write("   <table cellpadding='0' cellspacing='0' border='0' bgcolor='white'>");
   document.write("   <tr height='6'><td class='tiny'>&nbsp;</td></tr>");
   document.write("   <tr><td width='5' class='tiny'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>");
   document.write("      <td>");

   //This is the menu container table
   document.write("         <table cellpadding='0' cellspacing='0' border='0' width='" + sideMenuWidth + "'><tr>");
   document.write("            <td valign='top'>");

   //This is the menu table
   document.write("<table width='100%' cellpadding='0' cellspacing='0' border='0'>");

   //This is an empty row at top of table used to construct the top of table image
   document.write("<tr><td colspan='2'><table width='100%' cellpadding='0' cellspacing='0' border='0'><tr>");
   document.write("   <td height='14' width='98' background='" + sideMenuImagePath + "TopLeft.jpg'>&nbsp;</td>");
   document.write("   <td height='14' background='" + sideMenuImagePath + "TopCenter.jpg'>&nbsp;</td>");
   document.write("   <td height='14' width='18' background='" + sideMenuImagePath + "TopRight.jpg'>&nbsp;</td>");
   document.write("</tr></table></td></tr>");

   document.write("<tr><td><table width='100%' cellpadding='0' cellspacing='0' border='0'><tr>");
   document.write("    <td bgcolor='#97adfc' background='" + sideMenuImagePath + "MiddleLeft.jpg' style='background-repeat: repeat-y'>");

   document.write("<table cellpadding='0' cellspacing='0' border='0' width='100%'>");
   document.write("<tr><td colspan='3' height='2' width='" + subMenuWidth + "'></td></tr>");

   //This for loop inserts a row displaying each menu item
   for(itemCount=1; itemCount <= subItems.length; itemCount++)
   {
      var itemName = subItems[itemCount-1];
      var itemLink = subLinks[itemCount-1];

      var itemID = "side" + itemCount;

      document.write("<tr><td width='4' class='sideMenuItem'>&nbsp;&nbsp;</td><td><table width='100%' cellpadding='0' cellspacing='0' border='0' class='sideMenu' ID='" + itemID + "'>");
      document.write("<tr onmouseover='highlightSideItem(\"" + itemID + "\")' onmouseout='unHighlightSideItem(\"" + itemID + "\")'>");
      document.write("   <td width='1' class='tiny'>&nbsp;&nbsp;&nbsp;&nbsp;</td>");
      document.write("   <td height='" + menuItemHeight + "' align='left'><a href='" + itemLink + "' ID='" + itemID + "Link' class='sideMenuItem'>");
      document.write(itemName);
      document.write("</a></td></tr>");
      document.write("</table></td></tr>");
      
      //Provided this is not the last item, add the item separator
      if(itemCount < subItems.length)
         document.write("<tr height='2'><td colspan='3'></td></tr>");
   }

   document.write("<tr height='2'><td colspan='3' class='tiny'>&nbsp;</td></tr>");
   document.write("</table>");

   document.write("</td>");
   document.write("    <td width='10' background='" + sideMenuImagePath + "MiddleRight.jpg'>&nbsp;</td>");
   document.write("</tr></table></td></tr>");

   //This is an empty row at bottom of table used to construct the bottom of table image
   document.write("<tr><td colspan='2'><table width='100%' cellpadding='0' cellspacing='0' border='0'><tr>");
   document.write("   <td height='20' width='98' background='" + sideMenuImagePath + "BottomLeft.jpg'>&nbsp;</td>");
   document.write("   <td height='20' background='" + sideMenuImagePath + "BottomCenter.jpg'>&nbsp;</td>");
   document.write("   <td height='20' width='18' background='" + sideMenuImagePath + "BottomRight.jpg'>&nbsp;</td>");
   document.write("</tr></table></td></tr>");

   //document.write("<tr><td width='2' background='" + sideMenuImagePath + "LeftSpace.jpg'>&nbsp;&nbsp;</td><td colspan='3' height='20'></td></tr>");
   document.write("</table>");
   //End of menu table

   document.write("            </td>");
   document.write("         </tr></table>");
   //End of menu container table

   document.write("      </td>");
   document.write("      <td width='5' class='tiny'>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>");
   document.write("   <tr height='4'><td class='tiny'>&nbsp;</td></tr>");
   document.write("   </table>");
   //End of menu position table


   document.write("</td></tr>");
   document.write("</table>");
   //End of Left Column table
}