/*
	jQuery.imageMenu
	$(document).ready(function()
	{
		var menu = new imageMenu();
		menu.build('#isMenu','.isMenuOption',212 ,1);
		//param 1 = 全体のulタグのIDを指定
		//param 2 = liタグのclassを指定
		//param 3 = 広げる幅をpixelで指定
		//param 4 = 初期表示位置を指定（-1で指定なし。一番左は0）
	});
*/

function imageMenu()
{
	var self = this;
	
	this.build = function(selectMenu,selectElem,extendWidth,startElem)
	{
		self.menu = $(selectMenu);
		self.elems = $(selectElem,$(selectMenu));
		self.menuWidth = self.menu.width();
		self.extendWidth = extendWidth;
		self.elems.hover(self.rollHover,self.rollOut);
		
		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.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);
		
		if (startElem!=-1) {
			self.startElems = self.elems.eq(startElem);
			//初期表示
			var menuWidth = self.menu.width();
			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);
			$(self.elems).animate({'width':outWidth},'fast');
			self.startElems.stop();
			self.startElems.animate({'width':hoverWidth},'fast');
		}
	}
	
	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)
		self.elems.stop();
		$(self.elems).animate({'width':outWidth},'fast');
		$(this).stop();
		$(this).animate({'width':hoverWidth},'fast');
	}
	
	this.rollOut = function()
	{
		var menuWidth = self.menu.width();
		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);
		
		if (self.startElems) {
			self.elems.stop();
			$(self.elems).animate({'width':outWidth},'fast');
			self.startElems.stop();
			self.startElems.animate({'width':hoverWidth},'fast');
		}else{
			self.elems.stop();
			self.elems.animate({'width':singleWidth},'fast');
		}
	}
	
	
}