var subMenu;
var subMenuMaxHeight;
var subMenuTimer;
var subMenuDropDownTimer;
var subMenuDropUpTimer;

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

function topMenuHandler(){
		//Stop listen Event
	Event.stopObserving(window, 'load', topMenuHandler);

		//Init
	var i, child;

		//Make dropdown submenu
	subMenu = new Element('ul', {'id':'subMenu', 'class':'subMenu'});
	$('topMenu').insert({'after':subMenu});

		//Listen Event on menu elements
	children = $$('div.shopMenu');
	children.each(function(child){
		var bg, over;

		child.up().observe('mouseover', showSubMenu);
		child.up().observe('mouseout', hideSubMenu);
		subMenu.observe('mouseover', function(){clearTimeout(subMenuTimer);});
		subMenu.observe('mouseout', hideSubMenu);

		bg = new Image();
		bg.src = 'http://gfx.glisshop.com/graphic/shared/topMenu/' + child.up().getAttribute('id').substring(4).toLowerCase() + 'Background.png';
		over = new Image();
		over.src = 'http://gfx.glisshop.com/graphic/shared/topMenu/' + child.up().getAttribute('id').substring(4).toLowerCase() + 'Over.png';
	});

	actualShop();
}

function actualShop(){
		//Init
	var actualShopId, img, imgSrc, newSrc;

		//Affiche le shop dans lequel on se trouve
	if($$('div.actualShop')[0] != null){
		actualShopId = $$('div.actualShop')[0].ancestors()[0].getAttribute('id');
		
		initMenuButtons();
		img = $(actualShopId).childElements()[0].childElements()[0];
		imgSrc = img.getAttribute('src');
		if(imgSrc.substr(imgSrc.length - 8) != 'Over.png'){
			newSrc = imgSrc.substr(0, imgSrc.length - 4) + 'Over.png';
			img.setAttribute('src', newSrc);
		}
	}
}

function showSubMenu(event){
	clearTimeout(subMenuTimer);
	clearTimeout(subMenuDropUpTimer);

		//Init
	var dispatcherId, newContent, img, imgSrc, newSrc, i, child;

		//Gestion du dropdown
	dispatcherId = Event.findElement(event, 'DIV').getAttribute('id');
	newContent = Event.findElement(event, 'DIV').childElements()[Event.findElement(event, 'DIV').childElements().length - 1];
	newContent = newContent.childElements()[0];
	if(newContent != null){
		subMenu.update(newContent.innerHTML);
		subMenu.setAttribute('id', 'sous' + dispatcherId.substr(0,1).toUpperCase() + dispatcherId.substr(1) + 'Over');
	}

		//Change la source de l'image
	initMenuButtons();
	img = $(dispatcherId).childElements()[0].childElements()[0];
	imgSrc = img.getAttribute('src');
	if(imgSrc.substr(imgSrc.length - 8) != 'Over.png'){
		newSrc = imgSrc.substr(0, imgSrc.length - 4) + 'Over.png';
		img.setAttribute('src', newSrc);
	}

		//Calcul la hauteur maxi
	subMenuMaxHeight = 0;
	child = subMenu.descendants();
	for(i = 0; i < child.length; i++)
		if(child[i].offsetHeight > subMenuMaxHeight)
			subMenuMaxHeight = child[i].offsetHeight;

	if(newContent != null){
		dropDownSubMenu();
	}else{
		clearTimeout(subMenuDropDownTimer);
		dropUpSubMenu(false);
	}
}

function dropDownSubMenu(){
	if(subMenu.getHeight() < subMenuMaxHeight){
		var height = subMenu.getHeight() + 3;
		if(height > subMenuMaxHeight){
			height = subMenuMaxHeight;
		}
		subMenu.setStyle({'height':height + 'px'});
		subMenuDropDownTimer = setTimeout(dropDownSubMenu, 1);
	}
}

function hideSubMenu(event){
	subMenuTimer = setTimeout(function(){dropUpSubMenu(true);}, 2000);
}

function dropUpSubMenu(initButtons){
	if(0 < subMenu.getHeight()){
		var height = subMenu.getHeight() - 3;
		if(height < 0){
			height = 0;
		}
		subMenu.setStyle({'height':height + 'px'});
		subMenuDropUpTimer = setTimeout(function(){dropUpSubMenu(initButtons);}, 1);
	}else{
		if(initButtons == true){
			initMenuButtons();
			actualShop();
		}
	}
}

function initMenuButtons(){
	var buttons, i, img, imgSrc, newSrc;

	buttons = $('topMenu').childElements();
	for(i = 0; i < buttons.length; i++){
		img = buttons[i].childElements()[0].childElements()[0];
		if(img != null){
			imgSrc = img.getAttribute('src');
			newSrc = imgSrc.replace(/Over\.png/g, '.png');
			img.setAttribute('src', newSrc);
		}
	}
}