var menuTimer = null;
var activeMenu = null;

window.addEvent('domready', function() 
{
	$$('#MENU dl').each(function(item, index)
	{
		var dt = item.getElement('dt');
		var dd = item.getElement('dd');
		var dl = dt.getParent();
        var ul = item.getElement('ul');
        var li = ul.getChildren();
		
		dt.addEvent('mouseover', function()
		{
			clearTimeout(menuTimer);
			
			if ( activeMenu )
				closeMenu(activeMenu);
			activeMenu = dl;
			
			dd.setStyle('display', 'block');
			dt.addClass('active');
		});
		dd.addEvent('mouseover', function()
		{
			clearTimeout(menuTimer);
		});
        li.addEvents({
            'mouseover': activerItem,
            'mouseout' : desactiverItem
        });
		dl.addEvent('mouseout', function()
		{
			menuTimer = setTimeout(function ()
			{
				closeMenu(dl);
			}, 100);
		});
	});
});

function closeMenu(dl)
{
	dt = dl.getElement('dt');
	dd = dl.getElement('dd');
	
	dd.setStyle('display', 'none');
	dt.removeClass('active');
	
	activeMenu = null;
}

var activerItem = function(){this.addClass('activeItem')};
var desactiverItem = function(){this.removeClass('activeItem')};