/*
/* キービジュアル切り替え
*/
(function($){
	$(document).ready(function(){

		// 値の初期化
		var keyv = $('#top-image');
		var keyvNum = $('.visual-item', keyv).index($('.visual .default', keyv)) + 3 ;
		var keyvLength = $('.visual-item').length;
		var keyvInterval;
		var keyvReady = true;
		var myKeyvDuration = 500; // 切り替える速さ（ミリ秒）
		var myKeyvIntervalTime = 5000; // 切り替える時間間隔（ミリ秒）

		// 前へ戻る（上部）
		var prev = function( duration ){
			if( keyvReady ){
				keyvReady = false;
				var thumbLastChild = $('.thumbnail li:last-child', keyv).css( { marginTop: '-80px' } ).clone(true);
				$('.thumbnail', keyv).prepend(thumbLastChild);
				$('.thumbnail li:nth-child(2)', keyv).animate( { marginTop: '0' }, duration, 'easeOutQuad', function(){
					$('.thumbnail li:last-child').remove();
					keyvReady = true;
				} );
				if( keyvNum > 1 ){
					keyvNum--;
				} else {
					keyvNum = keyvLength;
				}
				swap( keyvNum, duration, true );
			}
		}
		
		// 次へ進む（下部）
		var next = function( duration ){
			if( keyvReady ){
				keyvReady = false;
				var thumbFirstChild = $('.thumbnail li:first-child', keyv).clone(true);
				$('.thumbnail', keyv).append(thumbFirstChild);
				$('.thumbnail li:last-child').css( { marginTop: '0' } );
				$('.thumbnail li:nth-child(2)', keyv).animate( { marginTop: '-80px' }, duration, 'swing', function(){
					$('.thumbnail li:first-child').remove();
					keyvReady = true;
				} );
				if( keyvNum < keyvLength ){
					keyvNum++;
				} else {
					keyvNum = 1;
				}
				swap( keyvNum, duration, true );
			}
		}

		// ビジュアルを切り替え
		var swap  = function( id, duration, execClearInterval ){
			$('.visual-item:visible',keyv).fadeOut( duration );
			$('.visual-item:nth-child(' +id+ ')',keyv).fadeIn( duration );
			// prev / next ボタンを押した場合、setInterval をリセット
			if ( execClearInterval ){  
				clearTimeout(keyvInterval);
				keyvIntervalSet();
			}
		}
		
		// 一定間隔でビジュアルを切り替え
		var keyvIntervalSet = function(){
			keyvInterval = setTimeout(function(){
				next( myKeyvDuration );
			}, myKeyvIntervalTime );
		}
		
		// サムネイルの要素を複製
		$('.thumbnail li',keyv).each(function(){
			$(this).parent().append( $(this).clone(true) );
		});
		
		// 各クリック時のアクションを設定
		$(keyv).append('<ul class="control"><li class="prev"><a href="#"><img src="images/home/btn_keyv_prev.gif" alt="前へ" width="182" height="13" /></a></li><li class="next"><a href="#"><img src="images/home/btn_keyv_next.gif" alt="次へ" width="182" height="13" /></a></li></ul>');
		$('.next a', keyv).click( function(){ next( myKeyvDuration ); return(false); } );
		$('.prev a', keyv).click( function(){ prev( myKeyvDuration );  return(false);} );
		$('.thumbnail li a', keyv).click(function(){
			var handle = $('.thumbnail li', keyv).index($(this).parent()) ;
			if( handle == 1 ){
				prev( myKeyvDuration );
			} else if ( handle == 3 ){
				next( myKeyvDuration );
			}
			return false;
		});

		// ロールオーバーで切り替えのタイマーを解除・ロールオーバー効果
		$('.visual').hover(function(){
			clearTimeout(keyvInterval);
		}, function(){
			keyvIntervalSet();
		});
		$('.visual-item').hover(function(){
			var rolloverButton = $('.visual-item-button',this);
			$(rolloverButton).attr("src", $(rolloverButton).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2").replace("_o_o","_o"));
		}, function(){
			var rolloverButton = $('.visual-item-button',this);
			$(rolloverButton).attr("src", $(rolloverButton).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
		});
		
		// 初期化
		$('.thumbnail li').css({ marginTop: 0 });
		keyvIntervalSet();
		next(0);
		
	});
})(jQuery);