// MJH Hover-over fade-up/down menu
// Copyright Matthew J Heaton 2010
// If you re-use this script then do not remove the above copyright
// Usage:
// 1. Include an id and onmouseover='StartMenu(this)' in the header tag
//    e.g. <a id='link1' class='header_menu' href='' onmouseover='StartMenu(this, menuId, [ParentMenuId])'>Hover here</a>
// 2. Include a menu block with an id of menuId (whatever id you want).
//    e.g  <div id='link1_menu' class='dropdown_menu'> ...[menu choices]... </div>
// 3. CSS style for dropdown_menu (or whatever class you use for the menu block) must
//    specify visibility:hidden and position:absolute

var Menus = new Object();
var TimerHide=0;

function StartMenu(Head, MenuId, ParentMenuId)
{
 if (!MenuId) return;
 if (!Menus[MenuId]) Menus[MenuId] = 0;
 var Menu = document.getElementById(MenuId);
 if (!Menu) return;
 Head.MenuId = MenuId;
 if (ParentMenuId) Menu.ParentMenuId = ParentMenuId
 Menu.IsShow = true;
// Head.onmouseover = OnHead;
 Head.onmouseout = OffHead;
 Menu.onmouseover = OnMenu;
 Menu.onmouseout = OffMenu;
 ShowMenu(Head);
}
function ShowMenu(Head)
{
  var nLeft = 0; var nTop = 0; var Tag = Head;
  while(Tag.offsetParent)
  {
    nLeft += Tag.offsetLeft;
    nTop += Tag.offsetTop;
    Tag = Tag.offsetParent;
  }
  var MenuId = Head.MenuId;
  var Menu = document.getElementById(MenuId);
  if (Menu.offsetParent)
  {
    Tag = Menu.offsetParent;
    while(Tag.offsetParent)
    {
      nLeft -= Tag.offsetLeft;
      nTop -= Tag.offsetTop;
      Tag = Tag.offsetParent;
   }
  }
  Menu.style.left = (nLeft+(Menu.ParentMenuId? Head.offsetWidth: 0))+'px';
  Menu.style.top = (nTop+(Menu.ParentMenuId? 0: Head.offsetHeight))+'px';
  SetMenu(MenuId, true);
}
function OnHead() { ShowMenu(this); }
function OffHead() { SetMenu(this.MenuId, false) }
function OnMenu() { SetMenu(this.id, true) }
function OffMenu() { SetMenu(this.id, false) }
function SetMenu(MenuId, bOn)
{
 var Menu = document.getElementById(MenuId);
 if (!Menu) {DisplayMenus(); return; }
 Menu.IsShow = bOn;
 var nPercent = Menus[MenuId];
 if (bOn && nPercent<0) Menus[MenuId] = 0;
 if (!bOn && nPercent>100) Menus[MenuId] = 100;
 if (Menu.ParentMenuId)
    SetMenu(Menu.ParentMenuId, bOn);
 else
   DisplayMenus();
}
function FadeMenu(MenuId)
{
 var nPercent = Menus[MenuId];
 var Menu = document.getElementById(MenuId);
 if (nPercent<100 && Menu.IsShow)
   Menus[MenuId] = nPercent = nPercent + 20;
 else if(nPercent>0 && !Menu.IsShow)
   Menus[MenuId] = nPercent = nPercent - 10;
 if (nPercent <= 0)
 {
   Menu.style.visibility = 'hidden';
   Menus[MenuId] = -1;
 }
 else
 {
  if (nPercent > 100)
    nPercent = 100;
  Menu.style.visibility = 'visible';
  Menu.style.filter = 'alpha(opacity='+nPercent+')';
  Menu.style.opacity = nPercent / 100.0;
  Menu.style.zIndex = (Menu.IsShow? '999': '998');
  if (nPercent >= 100)
    Menus[MenuId] = 101;
 }
}
function DisplayMenus()
{
 var MenuId;
 var bAgain = false;
 for ( MenuId in Menus )
 {
   var nPercent = Menus[MenuId];
   if (nPercent>=0 && nPercent<=100)
   {
     FadeMenu(MenuId);
     nPercent = Menus[MenuId];
     if (nPercent>0 && nPercent<100)
       bAgain = true;
   }
 }
 if (bAgain)
 {
   if (TimerHide) clearTimeout(TimerHide);
   TimerHide = setTimeout('DisplayMenus()',50);
 }
}