Event.observe(window, 'load', function() {
	$$('#menu > LI').each(function(li) {
		var next = li.down('UL');

		if (next)
		{
			li.observe('mouseover', function() {
				showSubMenu(next);
			});
		} 
		else
		{
			li.observe('mouseover', hideActiveSubMenu);
		}
	});
});

var active = null;

function showSubMenu(ul)
{
	if (active == ul)
		return;
		
	hideActiveSubMenu();
		
	active = ul;
	
	var o = ul.up().positionedOffset();
	
	ul.style.left = (o[0] - 12) + 'px';
	ul.style.top = (o[1] + 22) + 'px';
	ul.show();
}

function hideSubMenu(ul)
{
	if (! ul)
		return;
		
	ul.hide();
	active = null;
}

function hideActiveSubMenu()
{
	hideSubMenu(active);
}

Event.observe(window, 'click', function(e) {
	if (! active)
		return;
		
	var el = Event.element(e);
	
	if (! el.hasClassName('sub-menu') && ! el.up('.sub-menu'))
		hideActiveSubMenu();
});