// JavaScript Document
/*
 * LoopSlider for HORI Hospital
 * Copyright (c) 2011 http://qp3.jp / nez design Lab
*/


$(function() {
	
//**************************************************************設定項目	
	var iW= 169; ////////////////////////画像幅
	var iH= 355; ////////////////////////画像高さ
	var fX= 90; /////////////////////////吹き出しのleft位置
	var fY= 108; /////////////////////////吹き出しのtop位置
	
	var mDis= 1; ////////////////////////1回の移動距離（px 小数不可）
	var mDis2= 4; ///////////////////////スピードアップ時の1回の移動距離（px 小数不可）
	var mTime= 30; //////////////////////移動の繰り返し時間（ミリ秒）
	var fadeTime= 600; //////////////////フェードイン・フェードアウトの時間（ミリ秒）
	var img_dir= "loopslide_img/"; //////立ち姿画像のあるディレクトリ
	var img_ex= ".jpg"; /////////////////画像の拡張子
	var f_dir= "loopslide_img/fuki/"; //ふきだし画像のあるディレクトリ
	var f_ex= ".png"; /////////////////ふきだし画像の拡張子
	
	//////////////////順番
	var group1=[3,2,1,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4];
	

//**************************************************************設定項目ここまで	

	var tarName = '#loopslider_ul'
	var tar = $(tarName);
	var gL1=group1.length;
	var group2=[];///////////グループ分けするとき
	var gL2=group2.length;
	var iAW= iW*gL1; ////////////////////画像全ての幅	
	var isMove= false; //////////////////移動するか
	var isFast= false; //////////////////スピードアップ時か
	var mTo= 1; /////////////////////////左右移動
	var dis = mDis; /////////////////////現在の移動距離
	var loadedNum = 0; /////////////////////読み込んだ数
	var frameW = Number($("#loopslider").css("width").replace("px",""));
	var copyNum = Math.ceil((frameW-iW)/iW)+1;
	var startG = 0;
	var timer;
    tar.hide();
	
	var myPPN = ".lspp_fuki"/////////////////////ふきだしのクラス名

	var hitW = Math.ceil(iW*0.7);/////////////////////ヒット領域設定
	var hitX = Math.ceil((iW-hitW)/2);
	$(window).bind("load", function() { groupIn(startG); moveFunction();});
	
 	function groupIn(n){
		tar.children().remove();
		$("#loadinfo").fadeIn(fadeTime);
		var gL = eval("gL"+(n+1));
		var group =  eval("group"+(n+1));
		var zNum = tar.parent().css("z-index");
		iAW = iW*gL;
		for(var i=0;i<gL;i++){
			zNum +=2;
			tar.append('<li><img src="'+img_dir+group[i]+img_ex+'" width="'+iW+'" height="'+iH+'" /><img class="lspp_fuki" style="z-index:'+(zNum+1)+';display:none;position:absolute;left:'+fX+'px;top:'+fY+'px;" src="'+f_dir+group[i]+f_ex+'" /><div class="ls_hit" style="z-index:'+(zNum+2)+';position:absolute;top:0;left:'+hitX+'px;width:'+hitW+'px;height:'+iH+'px;"><img src="loopslide_img/spacer.png" width="'+hitW+'" height="'+iH+'" /></div></li>');
		};
		for(var i=0;i<copyNum;i++){
			zNum +=2;
			tar.append('<li><img src="'+img_dir+group[i]+img_ex+'" width="'+iW+'" height="'+iH+'" /><img class="lspp_fuki" style="z-index:'+(zNum+1)+';display:none;position:absolute;left:'+fX+'px;top:'+fY+'px;" src="'+f_dir+group[i]+f_ex+'" /><div class="ls_hit" style="z-index:'+(zNum+2)+';position:absolute;top:0;left:'+hitX+'px;width:'+hitW+'px;height:'+iH+'px;"><img src="loopslide_img/spacer.png" width="'+hitW+'" height="'+iH+'" /></div></li>');
		};
		
		$("#ar_L").css("z-index",zNum+1);
		$("#ar_R").css("z-index",zNum+2);
		
		$(".ls_hit",tarName).each(function(it){///////ロールオーバー設定
			var itNum = it;
			if(it>=gL){itNum = it-gL};
			$(this).mouseover(function(){
				$(myPPN,tarName).eq(it).css("display","block");
				isMove=false;
			}).mouseout(function(){
				$(myPPN,tarName).eq(it).css("display","none");
				isMove=true;
			});
		});
		
		loadedNum =0;
		$("li img",tarName).bind("load", function() {
			loadedNum++;
			if(loadedNum>=gL+copyNum){
				$("#loadinfo").fadeOut(fadeTime,function(){
					//tar.css("left",0);
					tar.fadeIn(fadeTime);
					isMove=true;
				});
			}
		});
	}
	
	
 	function moveFunction(){
		clearTimeout(timer);
		timer = setTimeout(moveFunction, mTime);
		
		if(isMove){
			if(isFast && dis < mDis2){ dis += 1 };
			if(!isFast && dis > mDis){ dis -= 1 };
			var now = Number(tar.css("left").replace("px",""));
			var next = now+(mTo*dis);
			if(next < -iAW){ next = 0-next};
			if(next > 0){ next = -iAW+next};
			tar.css({left:next+"px"});
		}
	}
	
	$("#ar_L").mouseover(function(){
		opChange(this,0.6);
		mTo=1;
		isFast=true;
	}).mouseout(function(){
		mTo=1;
		isFast=false;
		opChange(this,1);
	});
	$("#ar_R").mouseover(function(){
		opChange(this,0.6);
		mTo=-1;
		isFast=true;
	}).mouseout(function(){
		mTo=1;
		isFast=false;
		opChange(this,1);
	});
	
	function opChange(target,opNum){
		$(target).stop().animate({opacity:opNum},{easing:"easeOutQuart",duration:300});
	}
});