/* ***********************************
   JavaScript DHTML code by Tim Poulsen
   Ziff-Davis Education
   **********************************/

/* *************************************
Menu object constructor function
You must link in:
     dhtml.js
     clipping.js
     menu.js
  in that order.
Call from Web page with statement like:
     var myMenu = new Menu();
***************************************/
function Menu()
  {
  this.numberOfMenus = 0;
  this.menuRollOverColor = "#6699cc";
  this.menuBGColor = "#c0c0c0";
  this.subMenuBGColor = "White";
  this.subMenuRollOverColor = "#66ccff";
  this.borderColor = "Black";
  this.menuFont = "Verdana";
  this.menuFontSize = 10;
  this.menuTextColor = "Black";
  this.styleOpen = '<STYLE type="text/css">\n';
  this.style = " ";
  this.styleClose = '';
  this.writeSTYLE = new Function("document.write(this.styleOpen + this.style + this.styleClose)");
  this.html = '';
  this.itemClose = '</div></div>\n';
  this.writeHTML = new Function("document.write(this.html+this.itemClose)");
  this.js = '';
  this.clipFix = '\n';
  this.writeJS = new Function("document.write(this.js)"); // used for testing purposes only
  }

/* *************************************
Define Main Menu object
Call from Web page with statement like:
myMenu.menu1 = new MainMenu("parentMenuName", "MenuText", height, width, top, left)
***************************************/
function MainMenu(parent, menuText, h, w, t, l, sw)
  {
  this.parent = eval(parent);
  this.numberOfSubMenuItems = 0;
  this.h = h;
  this.w = w;
  this.t = t;
  this.l = l;
  this.sw = sw
  if(this.parent.numberOfMenus > 0) this.parent.html += this.parent.itemClose;
  this.parent.numberOfMenus++;
  this.myNum = this.parent.numberOfMenus;
  this.parent.styleClose = '.menuTextNormal { font-family: ' + this.parent.menuFont + '; font-size: ' + this.parent.menuFontSize + 'pt; color: ' + this.parent.menuTextColor + '; background-color: transparent; visibility: inherit;}\n.menuTextNormal A { text-decoration: none; font-family: ' + this.parent.menuFont + '; font-size: ' + this.parent.menuFontSize + 'pt; color: ' + this.parent.menuTextColor + '; background-color: transparent; visibility: inherit;}\n</STYLE>';
  this.parent.style += '#menu' + this.parent.numberOfMenus + 'BG { position: absolute; top: ' + (this.t) + '; left: ' + (this.l) + '; height: ' + (this.h+2) + '; width: ' + (this.w+2) + '; clip: rect(0px ' + (this.w+2) + 'px ' + (this.h+2) + 'px 0px); layer-background-color: ' + this.parent.borderColor + '; background-color: ' + this.parent.borderColor + ';}\n';

if(isIE5)
{
  this.parent.style += '#menu' + this.parent.numberOfMenus + 'DIV { position: absolute; top: ' + (this.t+1) + '; left: ' + (this.l+1) + '; height: ' + this.h + '; width: ' + this.w + '; clip: rect(0 ' + this.w + ' ' + this.h + ' 0); layer-background-color: transparent; background: url(trans.gif) repeat;}\n';
}
else if(isIE6)
{
this.parent.style += '#menu' + this.parent.numberOfMenus + 'DIV { position: absolute; top: ' + (this.t+1) + '; left: ' + (this.l+1) + '; height: ' + this.h + '; width: ' + this.w + '; clip: rect(0 ' + this.w + ' ' + this.h + ' 0); layer-background-color: transparent; background-color: white; FILTER: alpha(opacity=0);}\n';
}
else
{
  this.parent.style += '#menu' + this.parent.numberOfMenus + 'DIV { position: absolute; top: ' + (this.t+1) + '; left: ' + (this.l+1) + '; height: ' + this.h + '; width: ' + this.w + '; clip: rect(0px ' + this.w + 'px ' + this.h + 'px 0px); layer-background-color: transparent;}\n';
}
  this.parent.style += '#menu' + this.parent.numberOfMenus + 'LIST { position: absolute; top: ' + (this.t+1) + '; left: ' + (this.l+1) + '; height: ' + this.h + '; width: ' + this.w + '; clip: rect(0px ' + this.w + 'px ' + this.h + 'px 0px); layer-background-color: ' + this.parent.menuBGColor + '; background-color: ' + this.parent.menuBGColor + ';}\n';
  this.parent.html += '<div id="menu' + this.parent.numberOfMenus + 'BG">&nbsp;</div><div id="menu' + this.parent.numberOfMenus + 'LIST"><div class="menuTextNormal">&nbsp;' + menuText + '</div></div><div id="menu' + this.parent.numberOfMenus + 'DIV">&nbsp;</div>\n';
  this.parent.js += 'var menu' + this.parent.numberOfMenus + ' = new ActiveElement("menu' + this.parent.numberOfMenus + 'DIV");\n';
  this.parent.js += 'var menu' + this.parent.numberOfMenus + 'List = new ActiveElement("menu' + this.parent.numberOfMenus + 'LIST");\n';
  this.parent.js += 'var menu' + this.parent.numberOfMenus + 'Submenu = new ActiveElement("menu' + this.parent.numberOfMenus + 'SubmenuBG");\n';
  this.parent.js += 'var menu' + this.parent.numberOfMenus + 'SubmenuD = new ActiveElement("menu' + this.parent.numberOfMenus + 'SubmenuDIV", "menu' + this.parent.numberOfMenus + 'SubmenuBG");\n';
  this.parent.js += 'menu' + this.parent.numberOfMenus + '.elem.onmouseover = new Function("menu' + this.parent.numberOfMenus + 'List.setBGColor(\'' + this.parent.menuRollOverColor + '\')");\n';
  this.parent.js += 'menu' + this.parent.numberOfMenus + '.elem.onmouseout = new Function("menu' + this.parent.numberOfMenus + 'List.setBGColor(\'' + this.parent.menuBGColor + '\')");\n';
  this.parent.js += 'menu' + this.parent.numberOfMenus + '.elem.onclick = new Function("' + parent + '.collapse(' + this.parent.numberOfMenus + '); menu' + this.parent.numberOfMenus + 'Submenu.toggle()");\n';
  this.parent.clipFix += parent + ".menu" + this.myNum + ".reClip();";
  this.addItem = AddNewSubMenu;
  this.reClip = reClipSubMenus;
  }

/* *************************************
Define menu item
Call from Web page with statement like:
myMenu.menu1.addItem("ItemText", "ItemURL");
***************************************/
function AddNewSubMenu(menuText, menuLink)
  {
  this.numberOfSubMenuItems++;
  if(this.numberOfSubMenuItems == 1)
    {
    this.parent.style += '#menu' + this.parent.numberOfMenus + 'SubmenuBG { visibility: hidden; position: absolute; top: ' + (this.t+this.h+1) + '; left: ' + (this.l) + '; height: 200; width: ' + (this.sw+2) + '; clip: rect(0px ' + (this.sw+2) + 'px ' + (this.h+2) + 'px 0px); layer-background-color: ' + this.parent.borderColor + '; background-color: ' + this.parent.borderColor + '; }\n';
    this.parent.style += '#menu' + this.parent.numberOfMenus + 'SubmenuDIV { visibility: inherit; position: absolute; top: 1; left: 1; height: 51; width: sw; clip: rect(0px ' + this.sw + 'px ' + (this.h) + 'px 0px); layer-background-color: ' + this.parent.subMenuBGColor + '; background-color: ' + this.parent.subMenuBGColor + ';}\n';
    this.parent.style += '#menu' + this.parent.numberOfMenus + 'SubmenuITEM' + this.numberOfSubMenuItems + ' { position: absolute; top: 0;  left: 0; width: ' + (this.sw*1.5) + '; height: ' + (this.h*1.25) + '; clip: rect(0px ' + (this.sw*1.25) + 'px ' + (this.h*1.25) + 'px 0px); layer-background-color: ' + this.parent.subMenuBGColor + '; background-color: ' + this.parent.subMenuBGColor + '; }\n';
    this.parent.html += '<div id="menu' + this.parent.numberOfMenus + 'SubmenuBG"><div id="menu' + this.parent.numberOfMenus + 'SubmenuDIV">\n';
    this.parent.html += '&nbsp;&nbsp;&nbsp;<div id="menu' + this.parent.numberOfMenus + 'SubmenuITEM' + this.numberOfSubMenuItems + '"><div class="menuTextNormal">&nbsp;<a href="' + menuLink + '">' + menuText + '</a></div></div>\n';
    this.parent.js += 'var menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + ' = new ActiveElement("menu' + this.parent.numberOfMenus + 'SubmenuITEM' + this.numberOfSubMenuItems + '", "menu' + this.parent.numberOfMenus + 'SubmenuBG.document.menu' + this.parent.numberOfMenus + 'SubmenuDIV");\n';
    this.parent.js += 'menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.elem.onmouseover = new Function("menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.setBGColor(\'' + this.parent.subMenuRollOverColor + '\')");\n';
    this.parent.js += 'menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.elem.onmouseout = new Function("menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.setBGColor(\'' + this.parent.subMenuBGColor + '\')");\n';
   }
  else
    {
    this.parent.style += '#menu' + this.parent.numberOfMenus + 'SubmenuITEM' + this.numberOfSubMenuItems + ' { position: absolute; top: ' + (this.h*(this.numberOfSubMenuItems-1)) + '; left: 0; width: ' + (this.sw*1.25) + '; height: ' + (this.h*1.25) + '; clip: rect(0px ' + (this.sw*2) + 'px ' + (this.h*2) + 'px 0px); layer-background-color: ' + this.parent.subMenuBGColor + '; background-color: ' + this.parent.subMenuBGColor + '; }\n';
    this.parent.html += '&nbsp;&nbsp;&nbsp;<div id="menu' + this.parent.numberOfMenus + 'SubmenuITEM' + this.numberOfSubMenuItems + '"><div class="menuTextNormal">&nbsp;<a href="' + menuLink + '">' + menuText + '</a></div></div>\n';
    this.parent.js += 'var menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + ' = new ActiveElement("menu' + this.parent.numberOfMenus + 'SubmenuITEM' + this.numberOfSubMenuItems + '", "menu' + this.parent.numberOfMenus + 'SubmenuBG.document.menu' + this.parent.numberOfMenus + 'SubmenuDIV");\n';
    this.parent.js += 'menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.elem.onmouseover = new Function("menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.setBGColor(\'' + this.parent.subMenuRollOverColor + '\')");\n';
    this.parent.js += 'menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.elem.onmouseout = new Function("menu' + this.parent.numberOfMenus + 'SubmenuItem' + this.numberOfSubMenuItems + '.setBGColor(\'' + this.parent.subMenuBGColor + '\')");\n';
  }
  }

/* ****************************************
   Must re-clip the DIVs that build the
   menu to account for the final number
   of sub-menu items. This requires that
   we first call each submenu's clipInit()
   method. 
   CALLED AUTOMATICALLY
******************************************/
function reClipSubMenus()
  {
  eval("menu" + this.myNum + "Submenu.clipInit()");
  eval("menu" + this.myNum + "SubmenuD.clipInit()");
  eval("menu" + this.myNum + "Submenu.clipTo(0, " + (this.sw+2) + ", " + (this.h * this.numberOfSubMenuItems+2) + ", 0);");
  eval("menu" + this.myNum + "SubmenuD.clipTo(0, " + this.sw + ", " + (this.h * this.numberOfSubMenuItems) + ", 0);");
  }

/* ****************************************
   Provides capability of collapsing all of
   the other menus when you click on a menu.
   CALLED AUTOMATICALLY
******************************************/
function collapseAll(num)
  {
  for(i=1; i<=this.numberOfMenus; i++)
    {
    if(i != num) eval("menu" + i + "Submenu.hide()");
    }
  }
Menu.prototype.collapse = collapseAll;