var scrollState = {
    index: 0,
    maxIndex: 0,
    visible: 8,
    scrollIndex: 0,
    maxScroll: 0,
    autoScrollId: null,
    finished: false
};
$(document).ready(function () {
    registerScrollBox();
});
function updateScrollState() {
    var thumbs = $("div#scroll-box div.scroll-list ul li a.image");

    scrollState.maxIndex = thumbs.length - 1;
    scrollState.maxScroll = thumbs.length - scrollState.visible;
}
function registerScrollBox() {
    updateScrollState();

    $("a.scroll-left").click(scrollLeft);
    $("a.scroll-right").click(scrollRight);
    $("div#scroll-box div.scroll-list ul li a.image").live("click", function () {
        clearAutoScroll();

        var index = $(this).parent().index();
        scrollSelect(index, "secret");

        return false;
    });

    startAutoScroll();
}
function startAutoScroll() {
    scrollState.autoScrollId = setInterval(function () { scrollSelect(scrollState.index + 1, "secret"); }, 7000);
}
function clearAutoScroll() {
    if (scrollState.autoScrollId) {
        clearInterval(scrollState.autoScrollId);

        scrollState.autoScrollId = null;
    }
}
function scrollSelect(index, trigger) {
    if (index == scrollState.index)
        return false;

    return gotoFeatured(index, trigger);
}
function scrollLeft() {
    clearAutoScroll();

    return gotoFeatured(scrollState.index - 1, "secret");
}
function scrollRight() {
    clearAutoScroll();

    return gotoFeatured(scrollState.index + 1, "secret");
}
function gotoFeatured(newIndex, trigger) {
    if (newIndex >= 0 && newIndex <= scrollState.maxIndex) {
        var thumbs = $("div#scroll-box div.scroll-list ul li a.image");
        var secrets = $("div#scroll-box div.scroll-list ul li a.secret");
        
        thumbs.removeClass("selected");
        thumbs.eq(newIndex).addClass("selected");

        if (newIndex <= scrollState.maxScroll)
            scrollTo(newIndex);
        else if (scrollState.scrollIndex < scrollState.maxScroll)
            scrollTo(scrollState.maxScroll);

        scrollState.index = newIndex;

        if (trigger == "secret")
            secrets.eq(newIndex).trigger("click");
        else if (trigger == "image")
            thumbs.eq(newIndex).trigger("click");

        if (!scrollState.finished && scrollState.maxIndex - newIndex <= 12)
            updateThumbs();
    }

    return false;
}
function scrollTo(newIndex) {
    var list = $("div#scroll-box div.scroll-list ul");
    var items = $("li", list);

    var itemWidth = items.first().outerWidth(true);
    var dir = (scrollState.scrollIndex - Math.max(newIndex, 0)) * itemWidth;

    list.css("width", itemWidth * items.length + "px");
    list.animate({ left: "+=" + dir }, 500, null);

    scrollState.scrollIndex = newIndex;
}
function updateThumbs() {
    var pageNum = Math.ceil((scrollState.maxIndex + 1) / scrollState.visible) + 1;

    $.get("/Home/GetFeatureThumbs?pageNumber=" + pageNum, null, function (data) {
        var context = $("<div />").append(data);

        var thumbs = $("ul li", context);
        if (thumbs.length == 0)
            scrollState.finished = true;
        else {
            $("div#scroll-box div.scroll-list ul").append(thumbs);

            updateScrollState();
        }
    });
}
function scrollBoxSuccess() {
    var oldFeat = $("div#scroll-box div#featured div.old");
    var newFeat = $("div#scroll-box div#featured div.new").eq(0);

    oldFeat.fadeOut("fast", function() {
        $("div#scroll-box div#featured div.item").not(newFeat).remove();

        newFeat.fadeIn("fast", function() {
            $(this).addClass("old");
            $(this).removeClass("new");
        });
    });
}