var currentMenu = null;
var inEvent = false;

if (!document.getElementById)
    document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
    var menu = document.getElementById(menuId);
    var actuator = document.getElementById(actuatorId);

    if (menu == null || actuator == null) return;

    actuator.onmouseover = function() {
        if (currentMenu == null) {
            this.showMenu();
        }

        if (currentMenu) {
            currentMenu.style.visibility = "hidden";
            this.showMenu();
        }
    }
    
    actuator.onmouseout = handleMouseOut;
    menu.onmouseout = handleMouseOut;
			
		
    actuator.showMenu = function() {
        menu.style.left = this.offsetLeft + "px";
        menu.style.top = this.offsetTop + this.offsetHeight + "px";
        menu.style.visibility = "visible";
        currentMenu = menu;
    }
}

function handleMouseOut (event) {
			if (!event) var event = window.event;
			
			event.cancelBubble = true;
			
			var newEl=event.toElement||event.relatedTarget;
			var findNode = getContainerWith(newEl, "LI", "menubar");
				
			if (findNode != null)
			{
				if (findNode.tagName == 'HTML')
					currentMenu.style.visibility = "hidden";
			}
}

function getContainerWith(node, tagName, className) {

  // Starting with the given node, find the nearest containing element
  // with the specified tag name and style class.

  while (node != null) {
    if (node.tagName != null && node.tagName == tagName &&
        hasClassName(node, className))
    {
      return node;
    }
    
    if (node.tagName == 'HTML')
			return node;
		
    node = node.parentNode;
  }
	
  return node;
}

function hasClassName(el, name) 
{ 
	var i, list; 
	list = el.className.split(" "); 
	for (i = 0; i < list.length; i++) 
	{
		if (list[i] == name) return true;
	}
	return false; 
}