$(function() {
	$("#MainImgContainer div").each(function(i){
						  i++;
						  $(this).addClass('No'+i);
						  });//画像の数だけナンバークラスをつける
						  
	$("#NaviBox li img").each(function(i){
						  i++;
						  $(this).addClass('No'+i);
						  });//サムネイルの数だけナンバークラスをつける
						  
	$("#NaviBox li").clone(true).insertAfter("#NaviBox li:last");//ナビゲーションループ用リストのクローン
	
	$("#MainImgContainer span:first").clone(true).insertAfter("#MainImgContainer span:last");//メイン画像ループ用クローン
	
	var Width ="-="+512+"px";//メイン画像幅変数
	var WidthHover ="-"+512;//メイン画像幅変数
	
	
//画像動き
	var Length = $("#MainImgContainer span").length-1;//画像の枚数の抽出
	
	$("#MainImgContainer").delay(2000).animate({ 
		left:Width},{duration:2000,easing:'linear'
		});
	var N = 1;
	

	var time = setInterval(function(){
		$("#MainImgContainer").delay(2000).animate({ 
			left:Width},{duration:2000,easing:'linear'
			 });
			 N=N+1;
			if(N == Length){
				$("#MainImgContainer").animate({ 
												left:"0px"},{duration:1});
				N = 0;
			 };
	   },4000);
			 	
			 
//ナビの動き
	Height = $("#NaviBox").height();
	$("#NaviBox").animate({ 
		top:(-Height/2)+10},{duration:20000,easing:'linear',complete:function(){
			 $("#NaviBox").css({"top":2});
			 }});
		
	setInterval(function(){
			$("#NaviBox").animate({ 
			top:(-Height/2)+10},{duration:20000,easing:'linear',complete:function(){
				 $("#NaviBox").css({"top":2});
				 }});
				 
	   },20000);
	   
	   
//ナビのホバー
$("#NaviBox li img").hover(
			  function () {
				  clearInterval(time);
				  var target = eval($(this).attr('class').replace('No',''));//クラスの文字列を取り出し数値化
				  var target = (target-1)*(WidthHover);
					$("#MainImgContainer").stop().animate({ 
												left:target+"px"},{duration:1000});	
				  return false;
			  },
			  function () {
				  return false;
			  }
			);
	
});