$(function ()
{
    var SLIDE_INTERVAL = 3000; // ミリ秒
    
    var timerId;
    var curImgIndex = 0;
    var nextImgIndex = 1;
    var isAnimating = false;
    var imgSize =  $("#slidesBox img:first").width();
    var imgCount = $("#slidesBox img").length;

    // スライドボックスを複製して初期化
    var slidesBox = $("#slidesBox");
    slidesBox.css("width", imgSize * imgCount);
    var slidesBoxPrev = slidesBox.clone();
    var slidesBoxNext = slidesBox.clone();
    slidesBoxPrev.attr("id", "slidesBoxPrev");
    slidesBoxNext.attr("id", "slidesBoxNext");
    slidesBox.before(slidesBoxPrev);
    slidesBox.after(slidesBoxNext);
    $("#slidesContainer").css("left", $("#contents").position().left);
    slidesBoxPrev.css("left", -slidesBox.width());
    slidesBoxNext.css("left", slidesBox.width());
    
    // イベント登録
    $("#slidesContainer").bind("mouseover", function(){
        stopAnimation();
    });
    $("#slidesContainer").bind("mouseout", function(){
        startAnimation();
    });
    $(window).bind("resize", function(){
        $("#slidesContainer").css("left", $("#contents").position().left);
    });     
    $('.photoshift a').click(function(){
        var clickedIndex = parseInt($(this).attr('href').match('[^#/]+$')["0"]);
        if (clickedIndex == curImgIndex)
        {
            return;
        }
        stopAnimation();
        showImage(clickedIndex);
        startAnimation();
    });
    
    // アニメーションを開始する
    startAnimation();
    
    /**
     * アニメーションを開始する
     */
    function startAnimation()
    {
        clearInterval(timerId);
        timerId = setInterval(function(){
            var nextImgIndex = (curImgIndex + 1) % imgCount;
            showImage(nextImgIndex);
        },
        SLIDE_INTERVAL);
    }
    
    /**
     * アニメーションを停止する
     */
    function stopAnimation()
    {
        clearInterval(timerId);
    }
    
    /**
     * 指定した画像を表示する
     */
    function showImage(index)
    {
        if (isAnimating) 
        {
            return;
        }
        isAnimating = true;
        
        var moveLength = index - curImgIndex;
        var targetPosLeft = 0;
        if (Math.abs(moveLength) <= imgCount / 2)
        {
            targetPosLeft = index * -imgSize;
        }
        else
        {
            targetPosLeft = (index * -imgSize) + (slidesBox.width() * (moveLength < 0 ? -1 : 1));
        }
        
        slidesBox.animate({left: targetPosLeft}, "slow", "easeInOutCubic", function(){
            var tempBox;
            if (slidesBoxNext.position().left <= 0)
            {
                slidesBoxPrev.css("left", slidesBox.width());

                tempBox = slidesBox;
                slidesBox = slidesBoxNext;
                slidesBoxNext = slidesBoxPrev;
                slidesBoxPrev = tempBox;
            }
            else if (slidesBoxPrev.position().left + slidesBoxPrev.width() >= imgSize)
            {
                slidesBoxNext.css("left", -slidesBox.width());

                tempBox = slidesBox;
                slidesBox = slidesBoxPrev;
                slidesBoxPrev = slidesBoxNext;
                slidesBoxNext = tempBox;
            }
            curImgIndex = index;
            isAnimating = false;
          }
        );
        slidesBoxPrev.animate({left: targetPosLeft - slidesBox.width()}, "slow", "easeInOutCubic");
        slidesBoxNext.animate({left: targetPosLeft + slidesBox.width()}, "slow", "easeInOutCubic");

        // ナビゲーションを更新
        $(".photoshift img").each(function (i)
        {
            $(this).attr("src", "img/icon_maru_a.gif");
        });
        $(".photoshift img:eq(" + index + ")").attr("src", "img/icon_maru_b.gif");
    }    
});