//TOP画像切り替え
$(function ImgChange() {
	
	//ID取得
	var ilength;
	var i;
	$("#CHANGEIMGBOX #CHANGE_GRA p").each(function(i) {		
		i = i+1;
		$(this).attr("class","num"+ i);
		ilength = $("#CHANGEIMGBOX #CHANGE_GRA p").length;
	});
	
	//ID取得(ボタン)
	var btn_i;
	$("#CHANGEIMGBOX #CHANGE_BTN ul li").each(function(btn_i) {		
		btn_i = btn_i+1;
		$(this).attr("class","btn_num"+ btn_i);
	});
	

	//画像データ取得
	var imgheight;
	var imgwidth;
	$("#CHANGEIMGBOX #CHANGE_GRA p img").each(function() {
		imgsrc = $(this).attr("src");
//		imgheight = $(this).attr("height");
//		imgwidth = $(this).attr("width");
	});
	
	//デフォルト
//	$("#CHANGEIMGBOX #CHANGE_GRA").css("height",imgheight);
//	$("#CHANGEIMGBOX #CHANGE_GRA").css("width",imgwidth);
	$("#CHANGEIMGBOX #CHANGE_GRA p").css("opacity","0");
	$("#CHANGEIMGBOX #CHANGE_GRA p.num1").css("opacity","1");
	$("#CHANGEIMGBOX #CHANGE_GRA p.num1").show();

	//デフォルト(ボタン)
	DefaltBtn();
	function DefaltBtn() {
		$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num1 img').addClass('active');
		var btn01 = $('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num1 img').attr("src");
		btn01 = btn01.replace(/_oc/,'_active');
		$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num1 img').attr("src",btn01);
	};
	
	var t = 1;
	
	
	Change();


	//切り替え
	function Change() {	

		//画像データ取得
		var imgsrc;
		$("#CHANGEIMGBOX #CHANGE_GRA p.num"+t+" img").each(function() {
			imgsrc = $(this).attr("src");
		});

		//堀江さんロング
		if(t=="1"){
			$('#CHANGEIMGBOX #CHANGE_GRA p.num1').animate({"opacity": "1"}, 1000,"")
			$('#CHANGEIMGBOX #CHANGE_GRA p.num1').animate({"top": "0"}, 5000,"");
		}	
		
	
			
		$('#CHANGEIMGBOX #CHANGE_GRA p.num'+t).animate({"opacity": "1"}, 1000,"").animate({"top": "0"}, 3000,"",function(){$("#CHANGEIMGBOX #CHANGE_GRA").css("background","url("+imgsrc+") no-repeat 0 0"); }).animate({"opacity": "0"}, 500,"",
			function(){		
				$("#CHANGEIMGBOX #CHANGE_GRA p").hide();
		
		
				//ループ処理
				if(t < ilength) {
					$("#CHANGEIMGBOX #CHANGE_GRA p.num"+(t+1)).show();

					t ++;
					
					//ボタン
					var btn_imgsrc =  $("#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num"+(t-1)+" img").attr("src");
					btn_imgsrc = btn_imgsrc.replace(/_active/,'_oc');
					var btn_actimgsrc = $("#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num"+t+" img").attr("src");
					btn_actimgsrc = btn_actimgsrc.replace(/_oc/,'_active');
					
					$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num'+(t-1)+' img').removeClass('active');
					$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num'+(t-1)+' img').attr("src",btn_imgsrc);
					$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num'+t+' img').addClass('active');
					$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num'+t+' img').attr("src",btn_actimgsrc);
				

				} else {
					
					//ボタン
					var btn_actimgsrc = $("#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num"+t+" img").attr("src");
					btn_actimgsrc = btn_actimgsrc.replace(/_active/,'_oc');					
					$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num'+t+' img').attr("src",btn_actimgsrc);
					DefaltBtn();
					
					t = 1;

					$("#CHANGEIMGBOX #CHANGE_GRA p.num"+t).show();
				}
				
				Change();
	
		});
	}

	
	//ボタンオバー
	$("#CHANGEIMGBOX #CHANGE_BTN ul li").each(function(y) {
		
		y = y+1;
	

		$("#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num"+y+" img").hover(
		  function () {
			
			//マウスオーバー
			$("#CHANGEIMGBOX #CHANGE_GRA p").stop(true, true);

			var imgsrc;
			$("#CHANGEIMGBOX #CHANGE_GRA p.num"+y+" img").each(function() {
				imgsrc = $(this).attr("src");
			});
			

			$("#CHANGEIMGBOX #CHANGE_GRA").css("background","url("+imgsrc+") no-repeat 0 0");	

			$('#CHANGEIMGBOX #CHANGE_GRA p').animate({"opacity": "0"}, 500,"",function(){
				$("#CHANGEIMGBOX #CHANGE_GRA p").hide();
				$("#CHANGEIMGBOX #CHANGE_GRA p.num"+y).show();
				$("#CHANGEIMGBOX #CHANGE_GRA p.num"+y).animate({"opacity": "1"}, 1000,"");
			});
			

			//ボタン
			var x;
			$("#CHANGEIMGBOX #CHANGE_BTN ul li").each(function(x) {		
				x = x+1;
				var btn_actimgsrc = $("#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num"+x+" img").attr("src");
				btn_actimgsrc = btn_actimgsrc.replace(/_active/,'_oc');					
				$('#CHANGEIMGBOX #CHANGE_BTN ul li.btn_num'+x+' img').attr("src",btn_actimgsrc);
				$('#CHANGEIMGBOX #CHANGE_BTN ul li img').removeClass('active')
				//alert(x);
			});
			
			//ボタン
			var btn_actimgsrc = $(this).attr("src");
			btn_actimgsrc = btn_actimgsrc.replace(/_oc/,'_active');
			$(this).attr("src",btn_actimgsrc);
			$(this).addClass('active')
	
			return false;



		  },
		  function () {

				//マウスアウト
				t = y;
				Change();
		  }
		);
	
	
	});
	

});