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

2008-08-18
Updated by Christophe Deliens / get2future (chris@g2f.be) to support "itemIndexToActivate"
*/

function imageMenu()
{
	var self = this;
	
	this.build = function(selectMenu,selectElem,extendWidth,selectAppearOnHover,itemIndexToActivate)
	{
		self.menu = $(selectMenu)
		self.allElems = $(selectElem,$(selectMenu));
		self.selectAppearOnHover = selectAppearOnHover;
		self.menuWidth = self.menu.width();
		self.extendWidth = extendWidth;
		self.itemIndexToActivate = null;
		self.activeItemIndex = null;
		
		if (itemIndexToActivate != null && itemIndexToActivate >= 0) {
			self.itemIndexToActivate = itemIndexToActivate;
			self.activeItemIndex = itemIndexToActivate;
		}

		// binding "hover" event for every items but the active one
		self.resetHoverEvents();
		
		// binding click event
		self.allElems.click(self.itemClick);
		
		$(self.selectAppearOnHover,self.allElems).animate({'opacity':0},'fast');

		self.menu.css('position','relative');
		self.menu.append('<div style="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.allElems.appendTo($('.imageMenuContainer',self.menu));
		
		self.allElems.eq(self.allElems.length-1).width(self.menuWidth);
		self.elems = self.allElems.slice(0,self.allElems.length-1);
		
		// forcing "hover" function on item to activate
		if (itemIndexToActivate != null) {
			self.doHover(self.allElems.get(self.activeItemIndex));
		}
	}
	
	this.resetHoverEvents = function() {
		self.allElems.each(function() {
			$(this).hover(self.rollHover, self.rollOut);
		});
		if (self.activeItemIndex != null) {
			self.allElems.eq(self.activeItemIndex).unbind('hover');
		}
	}
	
	this.itemClick = function() {
		var clickedItem = this;
		self.allElems.each(function(i) {
			if (this.id == clickedItem.id) {
				self.activeItemIndex = i;
				return true;
			}
		});
		self.resetHoverEvents();
		self.doHover(this);
	}
	
	this.doHover = function(el) {
		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)
		$(el).removeClass('out');

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

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

		self.elems.stop();
		$(self.elems).animate({'width':outWidth},'fast');
		$(el).stop();
		$(el).animate({'width':hoverWidth},'fast');		
	}
	
	this.rollHover = function()
	{
		self.doHover(this);
	}
	
	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},'fast');
		
		self.elems.stop();
		self.elems.animate({'width':singleWidth},'fast');
		
		if (self.activeItemIndex != null) {
			self.doHover(self.allElems.get(self.activeItemIndex));
		}
	}
}