'jQuery' in window && (function($) {
	$(function(){
		init();
	});
	
	//const
	var EASING_TYPE = "easeOutSine";
	var DURATION = 300;
	
	//internal
	var currentNum = 0;
	var preNum = 0;
	var minNum,maxNum;
	var itemLength,totalWidth;
	var originSrcL,originSrcR;
	var $left,$right,$container,$body;
	
	function init(){
		//setItemInfo
		itemLength = $("#pickup li img").length;
		totalWidth = itemLength*(214+8);
		minNum = -(itemLength-3);
		maxNum = 0;
		
		//setStyle
		$("#pickup").css("margin-bottom",0).find("h2").css("margin-bottom",0).end().find("li").css("margin-bottom",0);
		$body = $("#pickup ul").css("width",totalWidth+"px").css("position","absolute").css("top","15px").css("left","6px").css("margin-bottom",0);
		
		$left = $("#leftArrow");
		$right = $("#rightArrow");
		if(itemLength <= 3){
			$body.css("padding-left","27px");
			$left.hide();
			$right.hide();
			return;
		}	
		
		//setImageSrc
		originSrcL = $left.find("img").attr("src").replace(/\.png/,"");
		originSrcR = $right.find("img").attr("src").replace(/\.png/,"");
		
		//preloadArrow
		$(new Image()).attr("src",originSrcL+"_u.png").attr("src",originSrcL+"_o.png").attr("src",originSrcR+"_u.png").attr("src",originSrcR+"_o.png");
		
		//activateArrow
		deactivate($left);
		activate($right);
	}

	function arrowClickHandler(e){
		e.preventDefault();
		update($(e.currentTarget));
	}
	
	function arrowOverHandler(e){
		var tgt = e.currentTarget.getElementsByTagName("img")[0];
		tgt.src = tgt.src.replace(/(.*)\.png/,"$1_o.png");
	}		
	
	function arrowOutHandler(e){
		var tgt = e.currentTarget.getElementsByTagName("img")[0];
		tgt.src = tgt.src.replace(/(.*)_o\.png/,"$1.png");
	}		
	
	function update($tgt){
		var name = $tgt.attr("id");
		
		if(name =="rightArrow"){
			currentNum--;
			if(currentNum < minNum){
				currentNum = minNum;
			}
		}else{
			currentNum++;
			if(currentNum > 0){
				currentNum = 0;
			}
		}
		if(preNum == currentNum) return;
		
		if(currentNum == 0 && preNum == -1){
			deactivate($left);
		}else if(currentNum == -1 && preNum == 0){
			activate($left);
		}
		if(currentNum == minNum && preNum == minNum+1){
			deactivate($right);
		}else if(currentNum == minNum+1 && preNum == minNum){
			activate($right);
		}
		
		var dest = currentNum*216+((currentNum+1)*6);
		$body.stop().animate({left:dest+"px"},{duration:DURATION,easing:EASING_TYPE});
		preNum = currentNum;
	}
	
	function activate($tgt){
		if($tgt.attr("id") == "rightArrow"){
			$tgt.find("img").attr("src",originSrcR+".png");
			$tgt.children("img").wrap('<a href="#right"></a>');
		}else{
			$tgt.find("img").attr("src",originSrcL+".png");
			$tgt.children("img").wrap('<a href="#left"></a>');
		}
		$tgt.bind("click",arrowClickHandler).bind("mouseover",arrowOverHandler).bind("mouseout",arrowOutHandler);
	}
	
	function deactivate($tgt){
		if($tgt.attr("id") == "rightArrow"){
			$tgt.find("img").attr("src",originSrcR+"_u.png");
		}else{
			$tgt.find("img").attr("src",originSrcL+"_u.png");
		}
		$tgt.children("a").replaceWith($tgt.find("img"));
		$tgt.unbind("click",arrowClickHandler).unbind("mouseover",arrowOverHandler).unbind("mouseout",arrowOutHandler);
	}
})(jQuery);