$(function(){

	var setId = '#slideshow';
	var fadeTime = 200;
	var delayTime = 9000;
	
	//================================
	//↓↓↓
	
	var thumbWidth	= 285;		//サムネイルの横幅
	var thumbDisp		= 3;			//サムネイルの画面内の表示件数
	
	var autoRestart	= 3000;		//自動スクロール停止後の再開待ち時間
	var autoTimer;						//自動スクロール停止後の再開タイマ
	
	//サムネイルの要素数
	var thumbLengh = $(setId +' ul li').length;
	
	//ulのwidthを上書きする
	$(setId + ' ul').css("width",(thumbLengh *thumbWidth));	
	
	//↑↑↑
	//================================
	
	$(setId + ' div div').each(function(i){
		$(this).attr('id','view' + (i + 1).toString());
		$(setId + ' div div').css({zIndex:'98',opacity:'0'});
		$(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
	});

	$(setId + ' ul li').click(function(){
		clearInterval(setTimer);

		//================================
		//↓↓↓
		
		clearInterval(autoTimer);
		
		//↑↑↑
		//================================

		var connectCont = $(setId + ' ul li').index(this);
		var showCont = connectCont+1;

		$(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
		$(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});

		$(this).addClass('active');
		$(this).siblings().removeClass('active');

		timer();

	});

	$(setId + ' ul li:not(.active)').hover(function(){
		$(this).stop().animate({opacity:'0.7'},100);//マウス乗せた時の透明度
	},function(){
		$(this).stop().animate({opacity:'1'},100);
	});

	$(setId + ' ul li').css({opacity:'1'});
	$(setId + ' ul li:first').addClass('active');

	timer();

	function timer() {
		setTimer = setInterval(function(){
			$('li.active').each(function(){
				var listLengh = $(setId + ' ul li').length;
				var listIndex = $(setId + ' ul li').index(this);
				var listCount = listIndex+1;
				
				//================================
				//↓↓↓
				
				//現在のindexを取得
				var nowIndex = listCount;
				if(nowIndex > listLengh-1){
					nowIndex= 0;
				}
				
				//サムネイル一覧をスクロールさせる
				thumbAdjust(nowIndex);
				
				//↑↑↑
				//================================
				
				if(listLengh == listCount){
					$(setId + ' ul li:first').click()
				} else {
					$(this).next('li').click();
				};
			});
		},delayTime);
	};
	
	//================================
	//↓↓↓
	
	//スクロールボタン押下時のイベント
	$('#thumbPrev').click(function(){ thumbPrevNext(-1); });
	$('#thumbNext').click(function(){ thumbPrevNext(+1); });
	
	//サムネイル一覧を指定した個数ぶん移動する
	function thumbPrevNext(div){
		
		//自動スクロールを停止し、一定時間後に再開させる
		clearInterval(setTimer);
		clearInterval(autoTimer);
		
		autoTimer = setTimeout(function(){
			timer();
		},autoRestart);
		
		//----------------
		
		//left移動量
		var moveLeft = -(div *thumbWidth);
		
		//現在のleft
		var nowLeft = parseInt($(setId +' ul').css("left").slice(0,-2));
		
		//left目的地
		var newLeft = nowLeft +moveLeft;
		
		var limitMin	= -((thumbLengh -thumbDisp) *thumbWidth);
		var limitMax	= 0;
		if(newLeft > limitMax){
			newLeft = limitMax;
		}else
		if(newLeft < limitMin){
			newLeft = limitMin;
		}
		
		//移動（スクロール実行）
		$(setId +' ul').animate({left:newLeft},250);
		
		return;
	}
	
	//サムネイル一覧が、指定idxが一覧内になるようにスクロールする
	function thumbAdjust(idx){
		
		//現在の左端のidxを取得
		var nowLeftIdx = getNowLeftIdx();
		
		//表示中でなければ
		if((idx < nowLeftIdx) || ((nowLeftIdx +thumbDisp) <= idx)){
			
			//左端にもってくるindexを取得
			var newIndexLeft = idx;
			if(nowLeftIdx +(thumbDisp -1) < idx){
				newIndexLeft = idx -(thumbDisp -1);
			}
			
			//移動先のleft
			var newLeft = "-" +(newIndexLeft *thumbWidth);
			
			//移動（スクロール実行）
			$(setId +' ul').animate({left:newLeft},500);
		}
		
		return;
	}
	
	//現在の左端のidxを取得
	function getNowLeftIdx(){
		
		var nowLeftIdx = (Math.abs(parseInt($(setId +' ul').css("left").slice(0,-2))) /thumbWidth);
		if(nowLeftIdx >= thumbLengh){
			nowLeftIdx= 0;
		}
		return nowLeftIdx;
	}
	
	//↑↑↑
	//================================
});

/*-----------------------------------------------------

	マウスカーソル変更

--------------------------------------------------------*/
/*
function mouseCursorInit(){
	
	$("#main").mouseover(function(){
		$("#mCursor").show();
		$(this).mousemove(function(e){
			$("#mCursor").css("left",(e.pageX+5));
			$("#mCursor").css("top",(e.pageY+5));
		});
	});
	$("#main").mouseout(function(){
		$("#mCursor").hide();
		$(this).unbind("mousemove");
	});
}*/
/*
$(document).ready(
	function(){
		
		mouseCursorInit();
		
	}
);*/

