/*
 * Initially, hide all the spotlights.
 * Then display only four at a time.
 * When scrolling left, hide the left-most then scroll.
 * When scrolling right, hide the right-most then scroll.
 * Use animate-opacity instead of fadeOut/fadeIn so that the
 * original size of the container is maintained.
 */

/* var MEDIA_URL is defined in the HTML page */

var totalSpotlights = 0;
var displayedSpotlights = 3;
var spotlightPage = 1;
var firstSpotlight = 1;
var spotlightIdPrefix = "#spotlight-";
var spotlightDisplayIdPrefix = "#spotlight-display-";

function changeSpotlight(displayPosition, dataPosition) {
    $(spotlightDisplayIdPrefix + displayPosition).css("background-image",
        "url(" + MEDIA_URL + "images/spinner.gif)");
    $(spotlightDisplayIdPrefix + displayPosition).html(" ");
    $(spotlightDisplayIdPrefix + displayPosition).addClass("loading");
    setTimeout(function () {
        if ($(spotlightIdPrefix + dataPosition).html()) {
            $(spotlightDisplayIdPrefix + displayPosition).css("background-image",
                $(spotlightIdPrefix + dataPosition).css("background-image"));
            $(spotlightDisplayIdPrefix + displayPosition).html($(spotlightIdPrefix + dataPosition).html());
            $(spotlightDisplayIdPrefix + dataPosition).removeClass("loading");
        } else {
            $(spotlightDisplayIdPrefix + displayPosition).css("background-image",
                "url(" + MEDIA_URL + "images/px.gif)");
        }
    }, 400);
}

$(document).ready(function () {
    totalSpotlights = $("#spotlights-data").children("li").length;

    if (totalSpotlights > displayedSpotlights) {
        /* Add the left arrow action */
        $("#spotlight-scroll-left").click(function (e) {
            /* Load previous 1 item */
            var startIndex = firstSpotlight - 1;
            if (startIndex < 1) {
                startIndex = totalSpotlights;
            }
            firstSpotlight = startIndex;

            var prev1 = firstSpotlight;
            var prev2 = firstSpotlight + 1;
            var prev3 = firstSpotlight + 2;

            if (prev2 > totalSpotlights) {
                prev2 = 1;
                prev3 = 2;
            }
            if (prev3 > totalSpotlights) {
                prev3 = 1;
            }

            setTimeout(function () {
                changeSpotlight(1, prev1);
            }, 0);
            setTimeout(function () {
                changeSpotlight(2, prev2);
            }, 100);
            setTimeout(function () {
                changeSpotlight(3, prev3);
            }, 200);
            return false;
        });

        /* Add the right arrow action */
        $("#spotlight-scroll-right").click(function (e) {
            /* Load next 1 item */
            var startIndex = firstSpotlight + 1;
            if (startIndex > totalSpotlights) {
                startIndex = 1;
            }
            firstSpotlight = startIndex;

            var next1 = firstSpotlight;
            var next2 = firstSpotlight + 1;
            var next3 = firstSpotlight + 2;

            if (next2 > totalSpotlights) {
                next2 = 1;
                next3 = 2;
            }
            if (next3 > totalSpotlights) {
                next3 = 1;
            }

            setTimeout(function () {
                changeSpotlight(3, next3);
            }, 100);
            setTimeout(function () {
                changeSpotlight(2, next2);
            }, 200);
            setTimeout(function () {
                changeSpotlight(1, next1);
            }, 300);
            return false;
        });
    }

    if (totalSpotlights > 0) {
        /* Load the first page of items */
        for (var i = 1; i <= displayedSpotlights; i++) {
            changeSpotlight(i, i);
        }
    }
});