/*
jQuery.imageMenu
Basé sur phatfusion image Menu. pour mootools (http://www.phatfusion.net/imagemenu/index.htm);
*/

function imageMenu()
{
	var self = this;
	var hoverDuration = 'fast';
	var outDuration = 'fast';
	
	this.build = function(selectMenu,selectElem,extendWidth,selectAppearOnHover, hoverDurationBuild, outDurationBuild)
	{
	    hoverDuration = hoverDurationBuild;
	    outDuration = outDurationBuild;
		self.menu = $(selectMenu)
		self.elems = $(selectElem,$(selectMenu));
		self.selectAppearOnHover = selectAppearOnHover;
		self.menuWidth = self.menu.width();
		self.extendWidth = extendWidth;
		self.elems.hover(self.rollHover,self.rollOut);
		
		$(self.selectAppearOnHover,self.elems).animate({'opacity':0},hoverDuration);

		self.menu.css('position','relative');
		self.menu.append('<div style="background:#00FFFF;position:absolute;height:'+$(selectMenu).height()+'px;width:'+($(selectMenu).width()*2)+'px;clip: rect(0px '+$(selectMenu).width()+'px '+$(selectMenu).height()+'px 0px);" class="imageMenuContainer"></div>');
		self.elems.appendTo($('.imageMenuContainer',self.menu));
		
		self.elems.eq(self.elems.length-1).width(self.menuWidth);
		self.elems = self.elems.slice(0,self.elems.length-1)
	}
	
	this.rollHover = function()
	{
		var menuWidth = self.menuWidth;
		var singleWidth = Math.floor(menuWidth/(self.elems.length+1));

		var outWidth = Math.floor((menuWidth-(singleWidth+self.extendWidth))/(self.elems.length));
		var hoverWidth = menuWidth - outWidth * (self.elems.length);
		//console.debug(outWidth+' '+hoverWidth)
		$(this).removeClass('out');

		$(self.selectAppearOnHover,self.elems).stop();
		$(self.selectAppearOnHover,self.elems).animate({'opacity':0},hoverDuration);

		$(self.selectAppearOnHover,this).stop();
		$(self.selectAppearOnHover,this).animate({'opacity':1},hoverDuration);

		self.elems.stop();
		$(self.elems).animate({'width':outWidth},hoverDuration);
		$(this).stop();
		$(this).animate({'width':hoverWidth},hoverDuration);
	}
	
	this.rollOut = function()
	{
		var menuWidth = self.menu.width();
		var singleWidth = Math.floor(menuWidth/(self.elems.length+1));
		
		$(this).addClass('out');

		$(self.selectAppearOnHover,this).stop();
		$(self.selectAppearOnHover,this).animate({'opacity':0},outDuration);
		
		self.elems.stop();
		self.elems.animate({'width':singleWidth},outDuration);
	}
}


function imageMenuVertical()
{
	var self = this;
	var hoverDuration = 'fast';
	var outDuration = 'fast';
	
	this.build = function(selectMenu,selectElem,extendHeight,selectAppearOnHover, hoverDurationBuild, outDurationBuild)
	{
	    hoverDuration = hoverDurationBuild;
	    outDuration = outDurationBuild;
		self.menu = $(selectMenu)
		self.elems = $(selectElem,$(selectMenu));
		self.selectAppearOnHover = selectAppearOnHover;
		self.menuHeight = self.menu.height();
		self.extendHeight = extendHeight;
		self.elems.hover(self.rollHover,self.rollOut);
		
		$(self.selectAppearOnHover,self.elems).animate({'opacity':0},hoverDuration);

		self.menu.css('position','relative');
		
		self.menu.append('<div style="top : 0px;left : 0px;position:absolute;height:'+$(selectMenu).height()+'px;width:'+($(selectMenu).width())+'px;clip: rect(0px ' + $(selectMenu).width() + 'px ' + $(selectMenu).height() + 'px 0px" class="imageMenuContainer"></div>');
		self.elems.appendTo($('.imageMenuContainer',self.menu));
		
		self.elems.eq(self.elems.length-1).height(self.menuHeight);
		self.elems = self.elems.slice(0,self.elems.length-1)
	}
	
	this.rollHover = function()
	{
		var menuHeight = self.menuHeight;
		var singleHeight = Math.floor(menuHeight/(self.elems.length+1));

		var outHeight = Math.floor((menuHeight-(singleHeight+self.extendHeight))/(self.elems.length));
		var hoverHeight = menuHeight - outHeight * (self.elems.length);
		//console.debug(outWidth+' '+hoverWidth)
		$(this).removeClass('out');

		$(self.selectAppearOnHover,self.elems).stop();
		$(self.selectAppearOnHover,self.elems).animate({'opacity':0},hoverDuration);

		$(self.selectAppearOnHover,this).stop();
		$(self.selectAppearOnHover,this).animate({'opacity':1},hoverDuration);

		self.elems.stop();
		$(self.elems).animate({'height':outHeight},hoverDuration);
		$(this).stop();
		$(this).animate({'height':hoverHeight},hoverDuration);
	}
	
	this.rollOut = function()
	{
		var menuHeight = self.menu.height();
		var singleHeight = Math.floor(menuHeight/(self.elems.length+1));
		
		$(this).addClass('out');

		$(self.selectAppearOnHover,this).stop();
		$(self.selectAppearOnHover,this).animate({'opacity':0},outDuration);
		
		self.elems.stop();
		self.elems.animate({'height':singleHeight},outDuration);
	}
}