var activeSubmenu = null;
var menuTimer;

var menuOverListener = function(event) {
	menuTimer.stop();
}

var menuOutListener = function(event) 
{
	// check if we are really out
	if (! activeSubmenu)
		return;
		
	var r = Rectangle.createFromElement(activeSubmenu);
	
	var p = new Point(Event.pointerX(event), Event.pointerY(event));
	
	if (! r.containsPoint(p)) {
		menuTimer.start();
	}
}

function initMenu() {
	var menuEl = $A(document.getElementsByClassName('menu')).first();
	
	if (! menuEl) 
	{
		return;
	}
	
	menuTimer = new Timer(function() {
			hideActiveMenu();
		}, 500
	);
	
	var t = new Timer(null, 150);
	
	Event.observe(document, 'mouseup', hideActiveMenu);
	
	$A(menuEl.getElementsByTagName('LI')).each(
		function(itemEl) {
			var subMenu = $A(itemEl.getElementsByTagName('ul')).first();
			
			if (subMenu) {
				Event.observe(itemEl, 'mouseover', function() {
					t.setCallback(function() { showMenu(subMenu); });
					t.start();
				});
				
				Event.observe(itemEl, 'mouseout', function() { 
					t.stop(); 
					
				});
				
				// onmouseout hide the menu after a second
				Event.observe(subMenu, 'mouseout', menuOutListener);
				Event.observe(subMenu, 'mouseover', menuOverListener);
				
			}
		}
	);
}

function hideActiveMenu() 
{
	if (activeSubmenu)
		hideMenu(activeSubmenu);
		
	activeSubmenu = null;
}

function showMenu(el) {
	
	if (el == activeSubmenu)
		return;
		
	hideActiveMenu();
	
	var p = Position.cumulativeOffset(el.parentNode);
	
	activeSubmenu = el;
	el.style.display = 'block';
	el.style.position = 'absolute';
	el.style.left = p[0] + 'px';
	el.style.top = p[1] + 'px';
	
	// hide select boxes
	$A(document.getElementsByTagName('SELECT')).each( 
		function(select) {
			select.style.visibility = 'hidden';
		}
	);
}

function hideMenu(el) {
	el.style.display = 'none';
	
	$A(document.getElementsByTagName('SELECT')).each( 
		function(select) {
			select.style.visibility = 'visible';
		}
	);
}

Event.observe(window, 'load', initMenu);