$(document).ready(function(e) {
	
	//ノブ生成
	var str = "";
	str += "<img src='images/effects/top_anime.jpg' />";
    $("#topic_l").append(str);
	
	//画像の高さ取得
	//var maxHeight = $("#topic_l img").height();
	var maxHeight = 4050;
	
	//一コマの高さ
	var cutHeight = 135;
	
	//ループの最大値取得
	var maxNum =( maxHeight / cutHeight)-1;
	
	//ロールオーバーのコマ
	var rollOverNum = 2;

	//クリック時のスピード
	var speed1 = 140;
	//マウスオーバー/アウト時のスピード
	var speed2 = 0;
	//closeボタンクリック時のスピード
	var speed3 = 30;
	
	$("#topic_l").css("height","135px");
	$("#topic_l").css("width","293px");
	$("#topic_l").css("overflow","hidden");
	
	$("#topic_l").css("position","relative");
	$("#topic_l img").css("position","absolute");
	$("#topic_l img").css("cursor","pointer");
	
	$("#topic_l img").click(function(){
		if(!isAnimation){
			isLoop = true;
			isAnimation = true;
			if(maxNum == 0){
				maxHeight = $("#topic_l img").height();
				maxNum =( maxHeight / cutHeight)-1;
			}
			
			slideNum= 4;
			setAnimation(maxNum,true,speed1,"forward");	
			
		}
	});
	
	$("#topic_l img").mouseover(function(){
		if(!isAnimation){
			$("#topic_l img").css("top","-"+(cutHeight*2)+"px");	
		}
	});
	
	$("#topic_l img").mouseout(function(){
		if(!isAnimation){
			$("#topic_l img").css("top","-"+(cutHeight*1)+"px");	
			
		}
	});
	
	addCloseBtn();
	
	var timer;
	var cntNum = 0;
	var slideNum = 1;
	
	var loopTimer;
	var loopNum = 0;
	var loopList = [maxNum-8,maxNum-7,maxNum-6,maxNum-5,maxNum-4,maxNum-3,maxNum-2,maxNum-1];
	var isLoop = false;
	var isAnimation = false;
	
	var stepMode = "forward";
	
	
	//アニメーション制御
	function setAnimation(num,loop,speed,direction){	
		stepMode = direction;
		cntNum = num;
		if(loop){
			isLoop = true;		
		}else{
			isLoop = false;
		}
		
		timer = setInterval(timerHanlder,speed);
	}
	
	
	//アニメーション
	function timerHanlder(){	
	
		if(slideNum == cntNum){	
		
			clearInterval(timer);
			
			if(slideNum == 1){
				isAnimation = false;
			}
			
			if(isLoop){
				$("#closeBox").css("display","block");
				loopTimer = setInterval(loop,speed1);
			}
			
		}else{
				$("#topic_l img").css("top","-"+(cutHeight*slideNum)+"px");		
				if(stepMode == "forward"){
					slideNum ++;
				}else{
					slideNum --;
				}
		}
		
		
	};
	
	//波のアニメーション		
	function loop(){
		isLoop = true;
		if(loopNum == loopList.length){
			loopNum = 0;
		}
		$("#topic_l img").css("top","-"+(cutHeight*loopList[loopNum])+"px");
		loopNum ++;
	}
	
	
	
	//閉じるボタン生成
	function addCloseBtn(){
		var cstr = "<div id='closeBox'>";
		cstr += "<img src='images/effects/btn_close.jpg'>";	
		cstr += "</div>";
		
		$("#topic_l").append(cstr);
		
		$("#closeBox").css("position","absolute");
		$("#closeBox").css("bottom","10px");
		$("#closeBox").css("right","10px");
		
		$("#closeBox").css("cursor","pointer");
		$("#closeBox").click(function(){
				closeBtnHandler();
		});
		
		$("#closeBox").mouseover(function(){
				$("#closeBox img").attr("src","images/effects/btn_close_on.jpg");
		});
		
		$("#closeBox").mouseout(function(){
				$("#closeBox img").attr("src","images/effects/btn_close.jpg");
		});
		
		$("#closeBox").css("display","none");
		
	}
	
	//閉じるボタン制御
	function closeBtnHandler(){
		clearInterval(loopTimer);
		slideNum = 1;
		cntNum = 0;
		isAnimation = false;
		
		$("#topic_l img").css("top","-"+(cutHeight*1)+"px");	
		$("#closeBox").css("display","none");
		
		
	}
	
});