/*----------------------------------
 
 瀬戸信用金庫
 http://www.setoshin.co.jp/
 
 mainImageSliderJS
 
----------------------------------*/

$(document).ready(function setting (){
	/********************************
				初期設定			
	********************************/
	
	//変数の初期化
	var listNum;
	var naviIndex;
	var nextNaviIndex;
	var newSrc;
	var newNextSrc;
	var i;
	var naviImageWidth;
	var timeoutVar;
	naviListArg	= [];
	
	listNum			= $( '#sliderMain li' ).size();				//リストの個数
	naviImageWidth	= $( '#sliderNaviImgList li' ).width();		//ナビゲーションイメージの横幅
	INTERVAL		= 5000;										//メインイメージの遷移の秒数(msecond)
	index			= 0;										//表示するメインイメージの番号
	naviIndex		= 1;										//フォーカスしているナビイメージの番号
	postfix			= '_cr';									//フォーカスイメージのファイル名 (ex: ***_cr.gif)
	
	//#sliderNaviImgList li を配列化
	$( '#sliderNaviImgList li' ).each(function() { naviListArg.push($(this)) });
	
	//liタグの初期化
	$( '#sliderNaviImgList li' ).remove();							//liをすべて削除
	
	for( i = 0; i <= 6; i++ ){										//配列化したものを7つ代入
		$( '#sliderNaviImgList ul' ).append( naviListArg[i] );
	}
	
	if( listNum < 7 ){												//要素が7未満だった場合
		for( i = 0; i <= 7; i++ ){
			
			newSrc	= $( naviListArg[0] ).children().attr('src');
			newSrc	= newSrc.replace(/_cr/g , '');
			$( naviListArg[0] ).children().attr('src' , newSrc);
			
			breakNum	= $( '#sliderNaviImgList li' ).size();
			
			if( breakNum >= 7 ){
				break;
			}
			
			lastList	= $( '#sliderNaviImgList li' ).last();
			$( naviListArg[i] ).clone(true).insertAfter( lastList );
		}
	}
	
	//liの頭に配列最後の3つを追加
	for( i=0; i<=2; i++ ){
		
		cloneSlideNavi	= $( naviListArg[listNum - 1 - i] );
		firstList		= $( '#sliderNaviImgList li' ).first();
		$(cloneSlideNavi).clone().insertBefore( firstList );
		
	}
	
	//10のliのposition調整
	for( i=0; i<=9; i++ ){
		
		naviPos	= (naviImageWidth * i) + 'px';
		
		$( '#sliderNaviImgList li' ).eq(i).css( 'left' , naviPos );
		
	}
	
	//四番目をフォーカスする
	
	newNextSrc	= $( '#sliderNaviImgList li' ).eq(3).children().attr('src');	//naviNumの次の li > imgのsrcに
	newNextSrc	= newNextSrc.replace(/^(.+)(\.[a-z]+)$/ , "$1_cr$2");			//_crを加え、
	$( '#sliderNaviImgList li' ).eq(3).children().attr('src' , newNextSrc );	//書き換える
	
	/****************************************************************
			onmouseのとき
	****************************************************************/
	
	$('#sliderNaviImgList li').live( 'hover' , function (){
		
		clearInterval(intervalVar);
		
	});
	
	$('#sliderNaviImgList li').live( 'mouseout' , function (){
		
		clearInterval(intervalVar);
		interval();
		
	});
	
	$('#sliderMain li').live( 'hover' , function (){
		
		clearInterval(intervalVar);
		
	});
	
	$('#sliderMain li').live( 'mouseout' , function (){
		
		clearInterval(intervalVar);
		interval();
		
	});
	
	/****************************************************************
			ナビイメージがクリックされたとき
	****************************************************************/
	
	$('#sliderNaviImgList li').live( 'click' , function (){
														
		clearInterval(intervalVar);		//インターバルを解除
		clearTimeout(timeoutVar);
		
		naviNum	= $('#sliderNaviImgList li').index(this);							//フォーカスさせるもの
		
		mainNum	= $('#sliderNaviImgList li').eq(naviNum).children().attr('name');	//次にfadeInさせるもの
		mainNum	= eval(mainNum)-1;
		
		naviNum	= naviNum -1;
		
		/********************************
			メインイメージのfadeOUT/IN
		********************************/
		
		for( i=0; i <= listNum; i++ ){							//display:noneでないものを
			
			displayFlg	= $( '#sliderMain li' ).eq(i).css('display');
			
			if( displayFlg !== 'none' ){
				
				$( '#sliderMain li' ).eq(i).fadeOut('slow');	//fadeOut
				
			}
		}
		
		$( '#sliderMain li' ).eq(mainNum).fadeIn('slow');		//fadeIn
		
		/********************************
			ナビイメージのスライド
		********************************/
		
		/*	フォーカスの遷移
		********************************/
		
		//フォーカス解除
		for( i=0; i<=9; i++ ){
			
			newSrc	= $( '#sliderNaviImgList li' ).eq(i).children().attr('src');	//li > imgのsrcから
			newSrc	= newSrc.replace(/_cr/g , '');									//_crを外し、
			$( '#sliderNaviImgList li' ).eq(i).children().attr('src' , newSrc);		//書き換える
			
		}
		
		//フォーカスする
		timeoutVar = setTimeout( function(){
			newNextSrc	= $( '#sliderNaviImgList li' ).eq(3).children().attr('src');	//naviNumの次の li > imgのsrcに
			newNextSrc	= newNextSrc.replace(/^(.+)(\.[a-z]+)$/ , "$1_cr$2");					//_crを加え、
			$( '#sliderNaviImgList li' ).eq(3).children().attr('src' , newNextSrc );	//書き換える
		}, 500);
		
		/*	positionの変更
		********************************/
		naviPos	= '-=' + naviImageWidth * (naviNum-2);					//naviNum-1だけ
		$( '#sliderNaviImgList li' ).animate( { 'left' : naviPos } );	//左にずれる
		
		/*	頭のliの削除と、末尾にliの追加
		********************************/
		
		for( i=0; i <= naviNum-3; i++ ){											//naviNum-2の数だけ
			
			lastList		= $( '#sliderNaviImgList li' ).last();					//末尾のliを取得
			
			lastNaviName	= $('#sliderNaviImgList li').last().children().attr('name');	//新規の末尾のli > imgのname
			
			naviPos			= naviImageWidth * ( 12 - naviNum + i );				//追加するliのposition
			
			checkNum		= eval(lastNaviName);								//追加する配列要素の判定用変数
			
			if( checkNum == listNum ){												//判定変数がリストのmax値と同じだったとき
				$( naviListArg[0] ).clone().insertAfter( lastList );
			}
			else if( checkNum > listNum ){											//判定変数がリストのmax値以上になったら
				$( naviListArg[checkNum - listNum] ).clone().insertAfter( lastList );
			}
			else if( checkNum < listNum ){											//判定変数がリストのmax値以下なら
				$( naviListArg[checkNum] ).clone().insertAfter( lastList );
			}
			
			$( '#sliderNaviImgList li' ).last().css('left' , naviPos);
			
		}
		
		for( i=0; i <= naviNum-3; i++ ){						//引数(naviNum)の数だけ
			$( '#sliderNaviImgList li' ).first().remove();		//リストを削除
		}
		
		interval();		//インターバル関数を読み直す
		
	});
	
	/****************************************************************
			nextがクリックされたとき
	****************************************************************/
	$('#slideNaviBox .next').live( 'click' , function(){
		
		clearInterval(intervalVar);		//インターバルを解除
		clearTimeout(timeoutVar);
		
		$('#slideNaviBox .nextPos').removeClass('next');
		
		timeoutVar = setTimeout( function(){
			
			$('#slideNaviBox .nextPos').addClass('next');
			
		}, INTERVAL-4000 );
		
		naviNum	= 4;
		
		mainNum	= $( '#sliderNaviImgList li' ).eq(naviNum).children().attr('name');
		mainNum	= eval(mainNum) - 1;
		
		/********************************
			メインイメージのfadeOUT/IN
		********************************/
		
		for( i=0; i <= listNum; i++ ){							//display:noneでないものを
			
			displayFlg	= $( '#sliderMain li' ).eq(i).css('display');
			
			if( displayFlg !== 'none' ){
				
				$( '#sliderMain li' ).eq(i).fadeOut('slow');	//fadeOut
				
			}
		}
		
		$( '#sliderMain li' ).eq(mainNum).fadeIn('slow');		//fadeIn
		
		/********************************
			ナビイメージのスライド
		********************************/
		
		/*	フォーカスの遷移
		********************************/
		
		//フォーカス解除
		for( i=0; i<=9; i++ ){
			
			newSrc	= $( '#sliderNaviImgList li' ).eq(i).children().attr('src');	//li > imgのsrcから
			newSrc	= newSrc.replace(/_cr/g , '');									//_crを外し、
			$( '#sliderNaviImgList li' ).eq(i).children().attr('src' , newSrc);	//書き換える
			
		}
		
		//フォーカスする
		timeoutVar = setTimeout( function(){
			newNextSrc	= $( '#sliderNaviImgList li' ).eq(naviNum-1).children().attr('src');	//naviNumの次の li > imgのsrcに
			newNextSrc	= newNextSrc.replace(/^(.+)(\.[a-z]+)$/ , "$1_cr$2");				//_crを加え、
			$( '#sliderNaviImgList li' ).eq(naviNum-1).children().attr('src' , newNextSrc );	//書き換える
		} , 500);
		
		/*	positionの変更
		********************************/
		
		naviPos	= '-=' + naviImageWidth * 1;					//1だけ
		
		$( '#sliderNaviImgList li' ).animate( { 'left' : naviPos } );	//左にずれる
		
		/*	頭のliの削除と、末尾にliの追加
		********************************/
		
		for( i=0; i <= naviNum-4; i++ ){											//naviNum-2の数だけ
			
			lastList		= $( '#sliderNaviImgList li' ).last();					//末尾のliを取得
			
			lastNaviName	= $('#sliderNaviImgList li').last().children().attr('name');	//新規の末尾のli > imgのname
			
			naviPos			= naviImageWidth * 9;					//追加するliのposition
			
			checkNum		= eval(lastNaviName);								//追加する配列要素の判定用変数
			
			if( checkNum == listNum ){												//判定変数がリストのmax値と同じだったとき
				
				$( naviListArg[0] ).clone().insertAfter( lastList );
			
			}
			
			else if( checkNum > listNum ){											//判定変数がリストのmax値以上になったら
				
				$( naviListArg[checkNum - listNum] ).clone().insertAfter( lastList );
			
			}
			
			else if( checkNum < listNum ){											//判定変数がリストのmax値以下なら
				
				$( naviListArg[checkNum] ).clone().insertAfter( lastList );
			
			}
			
			$( '#sliderNaviImgList li' ).last().css('left' , naviPos);
			
		}
		
		$( '#sliderNaviImgList li' ).first().remove();		//リストを削除
		
		interval();		//インターバル関数を読み直す
		
	});
	
	/****************************************************************
			prevがクリックされたとき
	****************************************************************/
	
	$('#slideNaviBox .prev').live( 'click' , function(){
														
		clearInterval(intervalVar);		//インターバルを解除
		clearTimeout(timeoutVar);
		
		$('#slideNaviBox .prevPos').removeClass('prev');
		
		timeoutVar = setTimeout( function(){
			
			$('#slideNaviBox .prevPos').addClass('prev');
			
		}, INTERVAL-4000 );
		
		naviNum	= 2;
		
		mainNum	= eval($( '#sliderNaviImgList li' ).eq(2).children().attr('name')) - 1;
		
		
		/********************************
			メインイメージのfadeOUT/IN
		********************************/
		
		for( i=0; i <= listNum; i++ ){							//display:noneでないものを
			
			displayFlg	= $( '#sliderMain li' ).eq(i).css('display');
			
			if( displayFlg !== 'none' ){
				
				$( '#sliderMain li' ).eq(i).fadeOut('slow');	//fadeOut
				
			}
		}
		
		$( '#sliderMain li' ).eq(mainNum).fadeIn('slow');		//fadeIn
		
		/********************************
			ナビイメージのスライド
		********************************/
		
		/*	フォーカスの遷移
		********************************/
		
		//フォーカス解除
		for( i=0; i<=9; i++ ){
			
			newSrc	= $( '#sliderNaviImgList li' ).eq(i).children().attr('src');	//li > imgのsrcから
		
			newSrc	= newSrc.replace(/_cr/g , '');									//_crを外し、
		
			$( '#sliderNaviImgList li' ).eq(i).children().attr('src' , newSrc);		//書き換える
			
		}
		
		//フォーカスする
		timeoutVar	= setTimeout( function(){
			newNextSrc	= $( '#sliderNaviImgList li' ).eq(3).children().attr('src');	//naviNumの次の li > imgのsrcに
			newNextSrc	= newNextSrc.replace(/^(.+)(\.[a-z]+)$/ , "$1_cr$2");				//_crを加え、
			$( '#sliderNaviImgList li' ).eq(3).children().attr('src' , newNextSrc );	//書き換える
		}, 500);
		
		/*	positionの変更
		********************************/
		naviPos	= '+=' + naviImageWidth;					//naviNum-1だけ
		$( '#sliderNaviImgList li' ).animate( { 'left' : naviPos } );	//右にずれる
		
		/*	末尾のliの削除と、先頭にliの追加
		********************************/
		
		firstList		= $( '#sliderNaviImgList li' ).first();		//最初のliを取得
		firstNaviName	= $('#sliderNaviImgList li').first().children().attr('name');
		
		firstPos		= 0;
		
		checkNum		= eval(firstNaviName) - 2;
		
		if( checkNum < 0 ){												//判定変数がマイナス値をとったとき
			$( naviListArg[listNum-1] ).clone().insertBefore( firstList );
		}
		else {															//それ以外のとき
			$( naviListArg[checkNum] ).clone().insertBefore( firstList );
		}
			
		$( '#sliderNaviImgList li' ).first().css('left' , firstPos);
		
		$( '#sliderNaviImgList li' ).last().remove();		//リストを削除
		
		interval();		//インターバル関数を読み直す
		
	});
	
	/****************************************************************
			setIntervalによる遷移
	****************************************************************/
	
	function interval( naviNum ){
		
		intervalVar	= setInterval( function(){
			
			naviNum	= naviNum || 4;		//次にフォーカスするもの eq()
			
			mainNum	= $( '#sliderNaviImgList li' ).eq(naviNum).children().attr('name');
			
			mainNum	= Number(mainNum)-1;	//次にfadeInするもの eq()
			
			/********************************
				メインイメージのfadeOUT/IN
			********************************/
			for( i=0; i <= listNum; i++ ){							//display:noneでないものを
				
				displayFlg	= $( '#sliderMain li' ).eq(i).css('display');
				
				if( displayFlg !== 'none' ){
					
					$( '#sliderMain li' ).eq(i).fadeOut('slow');	//fadeOut
					
				}
			}
			
			$( '#sliderMain li' ).eq(mainNum).fadeIn('slow');	//引数から次のイメージを取得してfadeIN
			
			/********************************
				ナビイメージのスライド
			********************************/
			
			/*	フォーカスの遷移
			********************************/
			
			//フォーカス解除
			for( i=0; i<=9; i++ ){
				
				newSrc	= $( '#sliderNaviImgList li' ).eq(i).children().attr('src');	//li > imgのsrcから
			
				newSrc	= newSrc.replace(/_cr/g , '');									//_crを外し、
			
				$( '#sliderNaviImgList li' ).eq(i).children().attr('src' , newSrc);	//書き換える
				
			}
			
			//フォーカスする
			timeoutVar = setTimeout( function(){
				newNextSrc	= $( '#sliderNaviImgList li' ).eq(3).children().attr('src');		//引数(naviNum)のli > imgのsrcに
				newNextSrc	= newNextSrc.replace(/^(.+)(\.[a-z]+)$/ , "$1_cr$2");					//_crを加え、
				$( '#sliderNaviImgList li' ).eq(3).children().attr('src' , newNextSrc );	//書き換える
			}, 500);
			
			/*	positionの変更
			********************************/
			
			naviPos	= '-=' + naviImageWidth * (naviNum-3);					//引数(naviNum)の数だけ
			
			$( '#sliderNaviImgList li' ).animate( { 'left' : naviPos } );	//左にずれる
			
			/*	頭のliの削除と、末尾にliの追加
			********************************/
			
			for( i=0; i <= naviNum-4; i++ ){						//引数(naviNum)の数だけ
				
				$( '#sliderNaviImgList li' ).eq(i).remove();		//リストを削除
				
				lastList	= $( '#sliderNaviImgList li' ).last();	//末尾のliを取得
			
				lastNaviLi	= $( '#sliderNaviImgList li' ).last().children().attr('name');	//末尾のli > imgのname
				
				naviPos	= naviImageWidth * ( 13 - naviNum + i );		//追加するliのposition
				
				lastNaviLi	= eval(lastNaviLi);
				
				if( lastNaviLi == listNum ){
					$( naviListArg[0] ).clone().insertAfter( lastList );				
				}
				else{
					$( naviListArg[lastNaviLi] ).clone().insertAfter( lastList );
				}
				
				$( '#sliderNaviImgList li' ).last().css('left' , naviPos);
				
			}
			
		}, INTERVAL);
	
	};
	
	interval();		//interval関数読み込み
	
});