$(function (){


//	first setting
	
	var imgNav = $("#imageNav");
	var mainImg = $("#mainImg ul");
	var timer;
	
	//js有効のときサムネイル表示
	$(imgNav).css("display","block")
		.children("li").fadeTo(100,0.3);

	//main image
	$("li" ,mainImg).not("#img1").fadeTo(0,0);
	
	
	//start
	navOver();
	navClick();
	chgImg1();
	
//	chenge image navigation
	//rollover
	function navOver(){
		$("img",imgNav).hover(function(){
			$(this).parent("li:not(:animated)").fadeTo(0,1);
		},function(){
			$(this).parent("li").fadeTo(0,0.3);
		});
	}
	//click
	function navClick(){
		$("img",imgNav).click(function(){
			var targetNav = $(this).parent("li").attr("id");
			switch (targetNav) {
				case "imgNav1": 
					chgImg1();
					break;
				case "imgNav2": 
					chgImg2();
					break;
				case "imgNav3": 
					chgImg3();
					break;
				case "imgNav4": 
					chgImg4();
					break;
				case "imgNav5": 
					chgImg5();
					break;
			}
		});
	}

// change main image
	
	function chgImg1(){
		clearTimeout(timer);
	  //navigation
		$("li",imgNav).not("#imgNav1").fadeTo(0,0.3).children("img").bind("mouseenter mouseleave",navOver);
		$("#imgNav1").fadeTo(0,1).children("img").unbind("mouseenter mouseleave");
	  //main image
		$("li" ,mainImg).stop().not("#img1").fadeTo(1500,0);
		$("#img1").appendTo(mainImg).fadeTo(1500,1);
	  //インターバル後次のイメージ表示
		timer = setTimeout(chgImg2,5000);
	}


	function chgImg2(){
		clearTimeout(timer);
	  //navigation
		$("li",imgNav).not("#imgNav2").fadeTo(0,0.3).bind("mouseenter mouseleave",navOver);
		$("#imgNav2").fadeTo(0,1).children("img").unbind("mouseenter mouseleave");
	  //main image
		$("li" ,mainImg).stop().not("#img2").fadeTo(1500,0);
		$("#img2").appendTo(mainImg).fadeTo(1500,1);
	  //インターバル後次のイメージ表示
		timer = setTimeout(chgImg3,5000);
	}

	function chgImg3(){
		clearTimeout(timer);
	  //navigation
		$("li",imgNav).not("#imgNav3").fadeTo(0,0.3).bind("mouseenter mouseleave",navOver);
		$("#imgNav3").fadeTo(0,1).children("img").unbind("mouseenter mouseleave");
	  //main image
		$("li" ,mainImg).stop().not("#img3").fadeTo(1500,0);
		$("#img3").appendTo(mainImg).fadeTo(1500,1);
	  //インターバル後次のイメージ表示
		timer = setTimeout(chgImg4,5000);
	}

	function chgImg4(){
		clearTimeout(timer);
	  //navigation
		$("li",imgNav).not("#imgNav4").fadeTo(0,0.3).bind("mouseenter mouseleave",navOver);
		$("#imgNav4").fadeTo(0,1).children("img").unbind("mouseenter mouseleave");
	  //main image
		$("li" ,mainImg).stop().not("#img4").fadeTo(1500,0);
		$("#img4").appendTo(mainImg).fadeTo(1500,1);
	  //インターバル後次のイメージ表示
		timer = setTimeout(chgImg5,5000);
	}

	function chgImg5(){
		clearTimeout(timer);
	  //navigation
		$("li",imgNav).not("#imgNav5").fadeTo(0,0.3).bind("mouseenter mouseleave",navOver);
		$("#imgNav5").fadeTo(0,1).children("img").unbind("mouseenter mouseleave");
	  //main image
		$("li" ,mainImg).stop().not("#img5").fadeTo(1500,0);
		$("#img5").appendTo(mainImg).fadeTo(1500,1);
	  //インターバル後次のイメージ表示
		timer = setTimeout(chgImg1,5000);
	}
	
	




});