﻿/*
 *	jQuery Slide
 *	@author	moag, Inc.
 */
 
$(function(){
		var photo = $( 'div#vidualAreaMainImage ul li' );			// 画像の表示領域
		var nav = $( 'div#vidualAreaNavi ul li' );			// ナビゲーション領域
		
		var n = photo.size();								// 画像数
		var c = 0;											// 現状のインデックス番号
		var c_old = c;										// 前画像インデックス番号保存用
		var slideTime = 5000;								// スライドの間隔
		var fadeTime = 300;									// フェードの時間
		
		nav.hover( function( ev ) {
			c = nav.index(this);
			if( c != c_old ) btnTogglePhoto();
		});
		
		photo.eq( 0 ).nextAll().hide();						// 先頭以外の画像は非表示（アクセス直後のみ）
		nav.eq( 0 ).addClass("selected");					// 最初のサムネイルを選択状態にしておく
		
		// タイマー設定
		var t = $.timer(slideTime, function (timer) {
			if ( c < n - 1 ) {
				c += 1;
			} else {
				c = 0;
			}
			togglePhoto();
		});
		
		// 画像切り替え
		function btnTogglePhoto(){
			t.stop();										// タイマー停止
			photo.hide();									// 表示中の画像を非表示に
			nextPhoto = photo.eq(c);						// 次の画像の設定
			nextPhoto.fadeIn(fadeTime);						// 次の画像を表示
			nav.removeClass("selected");
			nav.eq(c).addClass("selected");
			c_old = c;
			t.reset(slideTime);								// タイマー再起動
		}
		function togglePhoto(){
			t.stop();										// タイマー停止
			photo.eq(c_old).fadeOut( fadeTime, function() {
				photo.eq(c_old).hide();
				nav.removeClass("selected");
				nav.eq(c).addClass("selected");
				photo.eq(c).fadeIn( fadeTime, function() {
					c_old = c;
					t.reset(slideTime);
				} );
			} );
		}
		
});
