function show(obj)
 {
     obj.style.visibility = 'visible';
 }

 function hide(obj)
 {
    obj.style.visibility = 'hidden';
 }

 function CreateMenu(rowid,x,y,width,height,hColor,dColor,bColor,items,align,
                     border)
 {
    if(!items)
    {
       return;   // if no items specified just return 
    }
    var divHTML ;
    var menuBar;
    
    // Create HTML for top level menu, this one is always visible. //-->
    menuBar ="<DIV id=\"main_div_" + rowid + "\" align=\""+align+"\" ";
    menuBar += " style=\" position:absolute; CURSOR:hand; top:" + y + 
               "px; left:" + x + "px; width:" + width + "px; ";
    menuBar += " height:" + height + "px; visibility:visible; " +
               "background-color:" + dColor + ";\" ";
    menuBar += " onmouseover=\"show(document.all[\'div_"+ rowid +
               "\']);\"  onmouseout=\"hide(document.all[\'div_"+ rowid +
               "\']);\">"; 
    menuBar += titles[rowid][0] + " </DIV>";
    
    document.write (menuBar);
    y += document.all["main_div_" + rowid ].offsetHeight;

    // Create HTML for menu item container with hidden style. 
    divHTML = "<DIV id=\"div_"+rowid+"\"" ;
    divHTML += "style=\"position:absolute; top:" + y + "px; left:" + x + 
               "px; width:" + width + "px; visibility:hidden; ";
    divHTML += " padding-left:" + border + "; background-color:" + bColor + 
               ";\" ";
    divHTML += "onmouseover=\"show(this);\" onmouseout=\"hide(this);\" >\n";
    divHTML += CreateSeparatorBar(bColor,width-(border*2),border);

    // Create HTML for menu items and separators, visibility of each menu 
    // item is inherited as the visibility of its container. 
    for (i=0;i<items;i++)
    {
        divHTML += CreateMenuBar('div_'+rowid,rowid,i,width-(border*2),
                                  height,hColor,dColor,align);
        divHTML += CreateSeparatorBar(bColor,width-(border*2),border);
    }  
    divHTML += "</DIV>";
    document.write(divHTML);
 }
 
 function OnMouseOverBar(obj,rowid,colid,color)
 {
    obj.style.backgroundColor = color;
    window.status = menuArr[rowid][colid][2];
 }

 function OnMouseOutOfBar(obj,rowid,colid,color)
 {
    obj.style.backgroundColor = color;
    window.status = "";
 }

function onmenuclick(obj,code)
{
    hide(obj);
    eval(code); // execute the code corresponding to a menu item. 
}


 function CreateSeparatorBar(dColor,width,border)
 {
    var sepHTML; 
    sepHTML = "<DIV id=\"line_separator\" style=\"position:relative; " +
              "height:1px;" + 
              " background-color:"+dColor+";\" >";
    sepHTML += "<img src=\"\" width=" + width  + " height="+
               border/2+"></DIV> \n";
    return sepHTML;
 }

 function CreateMenuBar(parent,rowid,colid,width,height,hColor,dColor,align)
 {
    var subMenuHTML; 
    subMenuHTML = "\n<DIV align="+align+" id=\"div_"+rowid +
                  "_"+colid+"\" style=\"position:relative; CURSOR:hand; ";
    subMenuHTML += " width:"+width+"px; background-color:"+dColor+";\" ";
    subMenuHTML += " onmouseover=\"OnMouseOverBar(this,"+rowid+","+
                   colid+",\'"+ hColor+"\');\" ";
    subMenuHTML += " onclick=\"onmenuclick(document.all[\'"+parent+"\'],\'" + 
                   menuArr[rowid][colid][1] + "\');\" ";
    subMenuHTML += " onmouseout=\"OnMouseOutOfBar(this,"+rowid+","+colid+
                   ",\'"+dColor+"\');\" >";
    subMenuHTML +=  menuArr[rowid][colid][0];
    subMenuHTML += " </DIV> \n";
    return subMenuHTML;
 }
 
 var  menuArr;
 var  titles;

 function Initialize(rows,cols)
 {
  menuArr = new Array();
  titles =  new Array();
  for(i=0; i< rows; i++)
  {
     titles[i] =  new Array(2)
     titles[i][0] = "";     // Title to display in top level menu.
     titles[i][1] = 0;      //number of items in drop down menu.
  }
  for (i= 0;i <  rows; i++) 
  {
    menuArr[i] = new Array(cols)
    for (j= 0;j <  cols; j++) 
    {
        menuArr[i][j] = new Array(3)
        for (k=0; k < 3 ; k++)
         menuArr [i][j][k] = ""; // k=0 is for menu text.
                                 // k=1 is for the link to navigate to
                                 //     when menu is selected 
                                 // k=2 is the text that is displayed in 
                                        status window.
    }
  }
 }
 
 Initialize(1,4);            // One menu with three menu items.
 titles[0][0] = "File"; 
 titles[0][1] = 4;

 menuArr[0][0][0]="New";
 menuArr[0][0][1]="window.navigate(\\\'cool.html\\\');"
 menuArr[0][0][2]="open a new file.";

 menuArr[0][1][0]="Save";
 menuArr[0][1][1]="alert(\\\'save this document\\\');";
 menuArr[0][1][2]="save this document.";

 menuArr[0][2][0]="Exit"
 menuArr[0][2][1]="window.close();";
 menuArr[0][2][2]="see you later.";

 menuArr[0][3][0]="mail me...";
 menuArr[0][3][1]="window.navigate(\\\'mailto:alleey@usa.net\\\');";
 menuArr[0][3][2]="alleey@usa.net";
    
 for(i=0;i < 4; i++)
 {
    CreateMenu(i,i*150,0,150,15,'#000099','#999999','#c0c0c0',
               titles[i][1],'center',4);
 }