$(function() {
	$(".inside img").css("opacity","0.3");


	var totalPanels			= $(".scrollContainer").children().size();
		
	var regWidth			= $(".panel").css("width");
	var regImgWidth			= $(".panel img").css("width");
	
	var movingDistance	    = 74;
	
	var curWidth			= 300;
	var curImgWidth			= 298;
	
	var test				=102;

	var $panels				= $('#slider .scrollContainer > div');
	var $container			= $('#slider .scrollContainer');

	$panels.css({'float' : 'left'});
    
	$("#slider").data("currentlyMoving", false);


	$container
		.css('width',"2000px" )
		.css('left', "146px");

	var scroll = $('#slider .scroll').css('overflow', 'hidden');



	function returnToNormal(element,direction) {
		//alert(direction);
		if(direction==true){
		$(element)
			.animate({ width: regWidth,marginTop:test},500,"easeInCubic")
			.find("img")
			.animate({ width: regImgWidth},500,"easeInCubic")
		    .end()
		}else{
		$(element)
			.animate({ width: regWidth,marginTop:test},500,"easeInCubic")
			.find("img")
			.animate({ width: regImgWidth,opacity:0.5},500,"easeInCubic")
		    .end()
		};
	};
	
	function growBigger(element) {
		$(element)
			.animate({ width: curWidth,marginTop:0 },"easeInCubic")
			.find("img")
			.animate({ width: curImgWidth,opacity:1.0 },"easeInCubic")
		    .end()
	};


	function btn_set(flg,prm){
		$("#panel_"+flg).css("visibility",prm);
	};
	
	btn_set("prev","hidden");
	

	function change(direction) {		
		if(direction==true){
			btn_set("prev","visible");
			if(curPanel>(totalPanels-2)){
				btn_set("next","hidden");
			}
		};
		
		if(direction==false){
			btn_set("next","visible");
			if(curPanel<3){
				btn_set("prev","hidden");
			}
		};
		
			
			

		//ここでカレントより上か下かを判断している。下の条件にあえば関数を抜ける
		if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) {
			return false;
		}	
        

        if (($("#slider").data("currentlyMoving") == false)){ 
			$("#slider").data("currentlyMoving", true);
			if(direction == true && curPanel==6){
				$("#ep_flg img").attr({"src":"images/mid_flg.gif"});
			}else if(direction == false && curPanel==7){
				$("#ep_flg img").attr({"src":"images/mid2_flg.gif"});
			};
			
			var next         = direction ? curPanel + 1 : curPanel - 1;
			var leftValue    = $(".scrollContainer").css("left");
			var movement	 = direction ? parseFloat(leftValue, 20) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
		
			$(".scrollContainer").stop().animate({"left": movement},function(){$("#slider").data("currentlyMoving", false);});
			
			returnToNormal("#panel_"+curPanel,direction);
			growBigger("#panel_"+next);
			
			curPanel = next;
			

			$("#panel_"+(curPanel+1)).unbind();	
			
			//go forward
			//$("#panel_"+(curPanel+1)).click(function(){ change(true); });
			
            //remove all previous bound functions															
			$("#panel_"+(curPanel-1)).unbind();
			
			//go back
			//$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
			

			$("#panel_"+curPanel).unbind();
		}
	}



	growBigger("#panel_1");	
	var curPanel = 1;
	
	//$("#panel_"+(curPanel+1)).click(function(){ change(true); });
	//x$("#panel_"+(curPanel-1)).click(function(){ change(false); });
	$("#panel_next").click(function(){
			change(true);
	});
	$("#panel_prev").click(function(){
			change(false);
	});
	

	$("#ttl_over ul li img").each(function(){
		var tt = $(this).attr("src");
		$(this).hover(
			function(){
				var dot = tt.lastIndexOf('.');
				var imgtt = tt.substr(0,dot) +'_o'+tt.substr(dot,4);
				$(this).attr({"src":imgtt});
			},
			function(){
				$(this).attr({"src":tt});
			});
	});

		
		
});