var mTimeout	= 300;
var closeTimer	= 0;
var ddmenuitem	= 0;
var submenuZIndex = 100;
var activeMenuId = 0;

function mOpen(id, aMenuId){

	// cancel close timer
	mClearCloseTimer();

	// close old layer
	if(ddmenuitem){
		var ddmenuitemtmp = ddmenuitem;
		ddmenuitemtmp.style.display = 'none';		
	}
	
	if(activeMenuId){
		$(activeMenuId).style.backgroundPosition = 'center top';	
	}

	$(aMenuId).style.backgroundPosition = 'center bottom';
	activeMenuId = aMenuId;

	submenuZIndex += 1;

	// get new layer and show it
	ddmenuitem = $(id);
	ddmenuitem.style.display = 'block';
	ddmenuitem.style.zIndex = submenuZIndex;

}

function mClose(){

	if(ddmenuitem) {
		new Effect.Fade(ddmenuitem, {duration: 0.2, queue: 'end'});
		ddmenuitem	= 0;
		window.setTimeout(function(){
			$(activeMenuId).style.backgroundPosition = 'center top';
			activeMenuId = 0;		
		}, 150);

	}

}


function mSetCloseTimer(){
	closeTimer = window.setTimeout(mClose, mTimeout);
}

function mClearCloseTimer(){

	if(closeTimer){
		window.clearTimeout(closeTimer);
		closeTimer = null;
	}
}

Event.observe(window, 'click', mClose);
Event.observe(window, 'load', function(){

	$$('.submenu').each(function(elm){
		Event.observe(elm, 'mouseover', mClearCloseTimer);
		Event.observe(elm, 'mouseout', mSetCloseTimer);
	});

});