var nMenuItemCnt = 8

//Navigation panel links
var links = new Array();
links[1] = "AboutUs.asp";
links[2] = "collection.asp";
links[3] = "search.asp";
links[4] = "Hot.asp";
links[5] = "news.asp";
links[6] = "faq.asp";
links[7] = "dealers.asp";
links[8] = "contact.asp";

//Link's text
var text = new Array();
text[1] = "About Us";
text[2] = "Our Collection";
text[3] = "Search";
text[4] = "Holiday Theme";
text[5] = "News";
text[6] = "FAQ";
text[7] = "For Dealers";
text[8] = "Contact Us";

//Link's alt text
var tooltip = new Array();
tooltip [1] = "Information about Eggstravaganza company....";
tooltip [2] = "Our Entire Collection of jewerely...";
tooltip [3] = "Search for an item...";
tooltip [4] = "Seasonal items...";
tooltip [5] = "What is new at Eggstravaganza?";
tooltip [6] = "Frequently asked questions...";
tooltip [7] = "How to sell our eggs...";
tooltip [8] = "How to buy and Contact info...";

function PaintElement( id, Clr )
{ 
   var x = document.getElementById(id);
   x.bgColor = Clr; 
}

//Build Navigation Panel
function BuildMenu( Clr1, Clr2, Clr3, Clr4, Clr5, Clr6, Clr7, Clr8 )
{
  // Clr1 - Outer most rectangle border
  // Clr2 - Outer most rectangle area
  // Clr3 - Inner small rectangle border
  // Clr4 - 
  // Clr5 - 
  // Clr6 - unselected item rectangle
  // Clr7 - unselected item rectangle mouse over 
  // Clr8 - selected item rectangle (highlighted)

   var MenuItemClass = new Array(); // array of menu item classes (CSS)
   var par = new Array();
   var id = new Array();
   var href = new Array();
   var  BkgClr;
  
   for( i=1; i<=nMenuItemCnt; i++ )
   {
      par[i]= Clr6;
      id[i] = "_z" + i;
      MenuItemClass[i] = "menuItem";
      BkgClr = Clr6

      uri = document.location.href
      uri = uri.toLowerCase();
      if( uri.search( links[i].toLowerCase() ) > 0 )  
      {
         par[i]= Clr8;
         MenuItemClass[i] = "MenuItemSelected";
         BkgClr = "#003399"
      }

      href[i] = " href="+links[i];+
                   " onmouseover=\"PaintElement('"+id[i]+"','"+ Clr7 + "');\" " +
                   " onmouseout=\"PaintElement('"+id[i]+"','"+ Clr6 + "');\" "; 
      

      document.write(
         "<table cellpadding=0 width=135 align=center cellspacing=0 border=0>"+
            "<td bgcolor=" +Clr1+ ">"+
               "<table width=135 cellpadding=1 cellspacing=1 border=0>"+
                  "<tr bgcolor=" +Clr2+ "><td width=20>"+
                     "<table cellpadding=0 cellspacing=0 border=0 align=center>"+
                        "<td bgcolor=" +Clr3+ " width=5>"+
                           "<table cellpadding=0 cellspacing=1 border=0 align=center>"+
                              "<tr bgcolor=" +Clr4+ ">"+
                                 "<td id=" +id[i]+ " bgcolor=" +par[i]+ " width='10'>"+
                                    "<table>"+
                                       "<td></td>"+
                                    "</table>"+
                                 "</td>"+
                              "</tr>"+
                           "</table>"+
                        "</td>"+
                     "</table>"+
                  "</td>"+
                  "<td width=120 bgcolor='" + BkgClr + "'>"+
                     "<a class="+MenuItemClass[i]+href[i]+ " title='"+tooltip[i]+"'>"+"&nbsp;&nbsp;"+text[i]+"</a>"+
                  "</td>"+
               "</tr>"+
            "</tr>"+
         "</table>"+
      "</td>"+
      "</table>"+
      "<font size=-5>"+
      "<br>"+
      "</font>");
      //alert( "<a class= "+ MenuItemClass[i] + href[i]+ " title='"+tooltip[i]+"'>"+"&nbsp;&nbsp;"+text[i]+"</a>");
   }
  
   // To make every page "high" enough regardles of what we have on the right panel
   //document.write("<br><br><br><br><br><br><br><br><br><br>");
}