$(document).ready( function () {

	// Global変数
	var slideshow = $('#slideshow'),
	    controller = $('#controller'),
	    prevBtn = '<div class="prev"><img src="/shop/images/common/arrow_prev.gif" alt="" width="20" height="99" style="display:block;"/></div>',// 前へボタン
	    nextBtn = '<div class="next"><img src="/shop/images/common/arrow_next.gif" alt="" width="20" height="99" style="display:block;" /></div>',// 次へボタン
	    timerTime = 5000,// タイマーの時間（ミリ秒）
	    fadeInTime = 750,// ページロード時のフェードタイム
	    fadeToTime = 500,// 画像切替時のフェードタイム
	    hoverFlag = false;

	// 初期配置（呼び出し時のみに呼ばれる）
	$(slideshow).find('ul').find('li:first').fadeIn(fadeInTime);
	if (!jQuery.support.opacity) {// IE6-8
		if (!jQuery.support.tbody) {// IE6-7
			$(controller).fadeIn(fadeInTime);
		} else {// IE8
			$(controller).css('background-image', 'none');
			$(controller).css('background-color', '#fff');
			$(controller).fadeIn(fadeInTime);
		}
	} else {
		$(controller).fadeIn(fadeInTime);
	}

	// 項目数が5以下の場合は矢印画像を差し替え
	if ($(slideshow).find('li').length <= 5) {
		var prevBtn = prevBtn.replace('.gif', '_off.gif');
		var nextBtn = nextBtn.replace('.gif', '_off.gif');
		$(slideshow).append(prevBtn);
		$(slideshow).append(nextBtn);
		$(slideshow).find('div.prev').find('img').css('cursor', 'default');
		$(slideshow).find('div.next').find('img').css('cursor', 'default');
	} else {
		$(slideshow).append(prevBtn);
		$(slideshow).append(nextBtn);
	}
	if (!jQuery.support.opacity) {// IE6-8
		if (!jQuery.support.tbody) {// IE6-7
			$(slideshow).find('.prev, .next').fadeIn(fadeInTime);
		} else {// IE8
			$(slideshow).find('.prev, .next').css('background-image', 'none');
			$(slideshow).find('.prev, .next').css('background-color', '#fff');
			$(slideshow).find('.prev, .next').fadeIn(fadeInTime);
		}
	} else {
		$(slideshow).find('.prev, .next').fadeIn(fadeInTime);
	}


	// タイマーイベント
	function timer () {
		intervalID = setTimeout ( function () {
				clearTimeout (intervalID);
				var cur = $(controller).find('img').index($(controller).find('img.cur'));
				setCurrent (cur+1);

				var prev = $(slideshow).find("li").index($(slideshow).find("li:visible"));
				var next = prev +1;
				if ($(slideshow).find('li').length > 5) {
					$(slideshow).find('li:visible').fadeTo(fadeToTime,0,function(){$(this).css('display','none')});
					$(slideshow).find('li').eq(next).fadeTo(fadeToTime,1);
					$(slideshow).find('ul').append($(slideshow).find("li").eq(0));

					slide (1,'true');
				} else {
					var len = $(slideshow).find('li').length;
					if (len == next) {
						next = 0;
					}
					$(slideshow).find('li:visible').fadeTo(fadeToTime,0,function(){$(this).css('display','none')});
					$(slideshow).find('li').eq(next).fadeTo(fadeToTime,1,timer);
				}
		}, timerTime);
		if (hoverFlag) {
			clearTimeout (intervalID);
		}
	}

	// スライド機能
	function slide (num, flag) {
		// 値が0なら移動しない
		if (num === 0 || !num) {
			return;
		}
		roll (num, flag);
	}

	function roll (num,flag) {
		var rollIndex = $(controller).find("li");
		if (num > 0) {
			var base = $(controller).find("li")[num];
			var thumWidth = Number($(base).css("width").split("px")[0]);
			var baseLeft = Number($(base).css("left").split("px")[0]);
			var headThumNum = baseLeft / thumWidth;
		} else {
			var base = $(controller).find("li")[0];
			var thumWidth = Number($(base).css("width").split("px")[0]);
		}
		var nowMaxLen = new Number;

		$(rollIndex).each( function () {
			var i = Number($(this).css("left").split("px")[0]);
			if (nowMaxLen < i) {
				nowMaxLen = i;
			}
		})
		.each( function () {
			var thisIndex = $(this);
			var thisIndexNum = $(rollIndex).index($(thisIndex));
			var thisLeftVal = Number($(thisIndex).css("left").split("px")[0]);
			if (num > 0) {
				thisLeftVal = thisLeftVal - (thumWidth * headThumNum);// 移動後の値
			} else {
				thisLeftVal = thisLeftVal + thumWidth;// 移動後の値
			}
			// 移動後の値が0を下回るようなら
			if (thisLeftVal < 0) {
				// cloneの配置
				var thisClone = $(this).clone(true);
				thisClone = thisClone[0];
				thisCloneLeftVal = nowMaxLen + thumWidth + (thumWidth * thisIndexNum);
				thisClone = $(thisClone).css("left", thisCloneLeftVal);
				thisClone.appendTo($(controller).find("ul"));
				// cloneの移動
				thisCloneLeftVal = thisCloneLeftVal - (thumWidth * headThumNum);
				slideAnime (thisClone, thisCloneLeftVal);
				// thisの移動と消去
				slideAnime ($(this), thisCloneLeftVal, function(){$(this).remove();});
				slideAnime ($(this), thisLeftVal);
			} else if (thisLeftVal > nowMaxLen) {
				// cloneの配置
				var thisClone = $(this).clone(true);
				thisClone = thisClone[0];
				thisCloneLeftVal = -thumWidth;
				thisClone = $(thisClone).css("left", thisCloneLeftVal);
				thisClone.prependTo($(controller).find("ul"));
				if (num < 0){
					var thisCloneIndexNum = $(controller).find("li").index(thisClone);
				}
				// cloneの移動
				slideAnime (thisClone, "0px");
				// thisの移動と消去
				thisCloneLeftVal = nowMaxLen + thumWidth;
				slideAnime ($(this), thisCloneLeftVal, function(){$(this).remove();});
			} else {
				if (flag == 'true' && thisIndexNum == $(rollIndex).length - 1) {
					slideAnime ($(this), thisLeftVal, timer);
				} else {
					slideAnime ($(this), thisLeftVal);
				}
			}
		});
	}

	// スライドアニメーション
	function slideAnime (target, animVal, compFunc) {
		$(target).animate({left: animVal}, {"duration": 1200, "easing": "easeOutQuint", queue: false, complete: compFunc});
	}

	// メインパネルの切り替え機能（サムネイルのマウスオーバーイベント用）
	function changeTopic (prevIndexNum) {
		var num = $(controller).find("img").index($(controller).find("img[class='cur']"));
		$(slideshow).find('li').eq(prevIndexNum).stop().fadeTo(fadeToTime,0,function(){$(this).css('display','none')});
		$(slideshow).find("li").eq(num).stop().fadeTo(fadeToTime,1);
	}

	// サムネイルのカレント切り替え
	function setCurrent (thisIndexNum) {
		var img = $(controller).find("img[class='cur']");
		var srcImg = $(img).attr("src").replace("-thum_ovr", "-thum");
		$(img).attr("src", srcImg);
		$(controller).find("img[class='cur']").attr("class", "");

		if (thisIndexNum >= $(controller).find("img").length) {
			thisIndexNum = 0;
		}
		var currentImg = $(controller).find("img")[thisIndexNum];
		$(currentImg).attr("class", "cur");
		var srcImg = $(controller).find("img[class='cur']").attr("src").replace("-thum", "-thum_ovr");
		$(currentImg).attr("src", srcImg);
	}


	// イベント ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	if ($(slideshow).find('li').length > 5) {
		// ページ送り・戻しのクリックのイベント
		$(slideshow).find(".next").click( function () {
			// アニメーション中の要素がある場合はキャンセル
			if ($("#slideshow, #controller").find("li:animated").length > 0){
				return;
			}

			var cur = $(controller).find('img').index($(controller).find('img.cur'));

			// 現在のカレントのindexナンバー
			var num = cur + 1;

			setCurrent (num);

			var prev = $(slideshow).find("li").index($(slideshow).find("li:visible"));
			var next = prev +1;
			$(slideshow).find('li:visible').fadeTo(fadeToTime,0,function(){$(this).css('display','none')});
			$(slideshow).find('li').eq(next).fadeTo(fadeToTime,1);
			var imgLength = $(slideshow).find("li").length - 1;
			$(slideshow).find('ul').append($(slideshow).find("li").eq(0));

			clearTimeout (intervalID);
			slide(1);
		} );


		$(slideshow).find(".prev").click( function () {
			// アニメーション中の要素がある場合はキャンセル
			if ($("#slideshow, #controller").find("li:animated").length > 0){
				return;
			}

			var cur = $(controller).find('img').index($(controller).find('img.cur'));

			// 現在のカレントのindexナンバー
			var num = cur - 1;
			if (num < 0) {
				num = Number($(controller).find('img').length - 1);
			}

			setCurrent (num);

			var prev = $(slideshow).find("li").index($(slideshow).find("li:visible"));
			var next = prev -1;
			var imgLength = $(slideshow).find("li").length - 1;
			if (next < 0) {
				next = imgLength;
			}
			$(slideshow).find('li:visible').fadeTo(fadeToTime,0,function(){$(this).css('display','none')});
			$(slideshow).find('li').eq(next).fadeTo(fadeToTime,1);
			$(slideshow).find('ul').prepend($(slideshow).find("li").eq(imgLength));

			clearTimeout (intervalID);
			slide(-1);
		} );
	}


	// パネル上のマウスオーバー・アウトのイベント
	$(slideshow).mouseenter( function () {
		hoverFlag = true;
		clearTimeout (intervalID);
	} ).mouseleave( function () {
		hoverFlag = false;
		timer ();
	} );


	// サムネイルのマウスオーバー・アウトのイベント
	$(controller).mouseover( function () {
		hoverFlag = true;
		clearTimeout (intervalID);
	} ).mouseout( function () {
		hoverFlag = false;
		timer ();
	} );


	// サムネイル画像のマウスオーバー・アウトのイベント
	$(controller).find("img:not(.cur)").live({
		mouseover: function () {
			// アニメーション中の要素がある場合はキャンセル
			if ($("#controller").find("li:animated").length > 0){
				return;
			}
			var prevIndexNum = $(controller).find('img').index($(controller).find('img[class="cur"]'));
			var thisIndexNum = $(controller).find('img').index($(this));
			setCurrent (thisIndexNum);
			changeTopic (prevIndexNum);
		}
	} );

	// イベント発火
	timer ();

} );