$(document).ready(function(){
	//*********************************************
	// 初期設定
	//*********************************************
	//メイン画像のセレクタ
	var target = $("#main-image");
	//メイン画像切替のバナー一覧のセレクタ
	var bnrTarget = $("#btn li");
	//メイン画像切替数
	var topImgChangeCnt = 4;

	//タイマー名称
	var timmerName = "topImgChange";
	//初回表示カウント
	var dispCnt = 0;
	//メイン画像切替速度(ミリ秒)
	var changeSpeed = 800;
	//メイン画像切替間隔(ミリ秒)
	var changeTime = 8000;
	
	//*********************************************
	// トップ看板の動作
	//*********************************************
	var _topImgChange = function(count) {
		
		//再帰処理を停止
		target.stopTime(timmerName);
		
		_topImgChangeOne(count);
		
		//再帰処理を再開
		target.oneTime(changeTime,timmerName,function(){_topImgChange(dispCnt + 1);return;});
		
		return;
	};
	
	var _topImgChangeOne = function(count) {
		if(count > (topImgChangeCnt - 1)) count = 0;
		var beforeCount = dispCnt;
		
		//********メイン処理********
		//切替バナーの色変更
		if(beforeCount != count || count == 0){
			if(count != 0){
				bnrTarget.eq(beforeCount - 1).find("img").css("visibility","visible");
				bnrTarget.eq(count - 1).find("img").css("visibility","hidden");
			}else{
				bnrTarget.eq(topImgChangeCnt - 2).find("img").css("visibility","visible");
			}
			//メイン画像の変更
			target.find("p").eq(beforeCount).fadeOut(changeSpeed);
			target.find("p").eq(count).fadeIn(changeSpeed);
		}
		
		dispCnt = count;
		
		return;
	};

	
	//*********************************************
	// トップ看板の初期動作(自動切り替わり)
	//*********************************************
	_topImgChange(dispCnt);

	
	//*********************************************
	// 切替バナーのマウスオーバー動作
	//*********************************************
	bnrTarget.hover(function(){
		//再帰処理を停止
		target.stopTime(timmerName);
		
		var cnt = bnrTarget.index(this) + 1;
		_topImgChangeOne(cnt);
		
		return false;
	},
	function(){
		//現在のアニメーションを停止
		target.find("p").stop(true,true);
		//再帰処理を再開
		target.oneTime(changeTime,timmerName,function(){_topImgChange(dispCnt + 1);return;});
		
		return false;
	});	
	
});