/**
 * メインビジュアルの切り替え用
 */
$(document).ready(function() {
	
	// 設定
	var thumb = '#thumb li';   // サムネイルの要素
	var image = '#mv h2'       // メイン画像の要素
	var speed = 4000;          // 切り替えのスピード
	var i = 0;                 // デフォルトの表示位置の設定
	var max = $(thumb).length; // 表示要素数の設定
	var fade = 1000;           // クロスフェードのスピード
	//alert(max);
	
	// 最初の処理
	$(image).eq(i).addClass("selected");
	$(image).css({opacity:'0'});
	$(image).eq(i).animate({opacity:'1'},700);
	i++;
	
	// サムネイルをクリックした時のメソッド
	$(thumb).click(function() {
		i = $(this).index(); // クリックされたインデックスを取得
		chengeVisual(i);
	});
	
	// 画像切り替えるメソッド
	var chengeVisual = function(n) {
		if (n == max) n = 0;
		$(thumb).eq(n).thumbActive();
		$(image).eq(n).foreground();
	}
	// 要素インデックスのカウント
	var counter = function() {
		if (i == max) i = 0; // 要素数を超えたら0に戻す
		chengeVisual(i);
		i++;
	}
	var timer = setInterval(counter, speed);
	
	$.fn.extend({
		// サムネイルをアクティブにする
		thumbActive : function() {
			// 画像を変更
			var off = $(this).siblings().children().attr("src").replace("_on.", "_of.");
			$(this).siblings().children().attr('src', off);
			var on = $(this).children().attr("src").replace("_of.", "_on.");
			$(this).children().attr('src', on);
			// クラスを変更
			//$(this).siblings().removeClass("focus");
			//$(this).addClass("focus");
		},
		// 選択されたメイン画像を最前面に持ってくる
		foreground : function() {
			$(this).siblings().removeClass("selected");
			$(this).addClass("selected");
			$(this).siblings().stop();
			$(this).siblings().animate({opacity:'0'},fade);
			$(this).stop();
			$(this).animate({opacity:'1'},fade);
		}
	});
	
});