var currentSpotlightIndex = -1;
var nextSpotlightIndex = -1;
var spotlightCount = 0;
var fadeIntervalMs = 10000;
var fadeInterval;

function gotoSpotlight() {
    nextSpotlightIndex = $("#spotlightNavigation > .navigationSquare").index(this);
    swapSpotlight();
}

function showPreviousSpotlight() {
    nextSpotlightIndex = (currentSpotlightIndex < 1) ? (spotlightCount - 1) : (currentSpotlightIndex - 1);
    swapSpotlight();
}

function showNextSpotlight() {
    nextSpotlightIndex = (currentSpotlightIndex == spotlightCount - 1) ? 0 : (currentSpotlightIndex + 1);
    swapSpotlight();
}

function resetNavigationSquares() {
    $(".navigationSquare").attr("src", "/images/ui/square_dim.png");
}

function swapSpotlight() {

    clearInterval(fadeInterval);
    resetNavigationSquares();

    // fade out current content if applicable
    if (currentSpotlightIndex != -1) {
        $("#spotlightWindow > .spotlightImageHost").eq(currentSpotlightIndex).stop().animate({ opacity: 0.0 }, 1200);
        $("#spotlightWindow > .spotlightImageHost").eq(currentSpotlightIndex).css("z-index", "0");
        $(".spotlightTitleHost").eq(currentSpotlightIndex).animate({ opacity: 0.0 }, 600);
        $(".spotlightCaptionHost").eq(currentSpotlightIndex).animate({ opacity: 0.0 }, 600);
    }

    // fade in next slide
    $("#spotlightWindow > .spotlightImageHost").eq(nextSpotlightIndex).stop().animate({ opacity: 1.0 }, 1150);
    $("#spotlightWindow > .spotlightImageHost").eq(nextSpotlightIndex).css("z-index", "10");
    $(".spotlightTitleHost").eq(nextSpotlightIndex).animate({ opacity: 1.0 }, 1150);
    $(".spotlightCaptionHost").eq(nextSpotlightIndex).animate({ opacity: 1.0 }, 1150);
    $(".navigationSquare").eq(nextSpotlightIndex).attr("src", "/images/ui/square_lit.png");

    currentSpotlightIndex = nextSpotlightIndex;

    // reset the interval regardless of caller
    fadeInterval = setInterval(showNextSpotlight, fadeIntervalMs);
}

$(document).ready(function () {
    $(".spotlightImageHost").css("opacity", 0);
    $(".spotlightTitleHost").css("opacity", 0);
    $(".spotlightCaptionHost").css("opacity", 0);
    $(".navigationSquare").click(gotoSpotlight);
    $(".navigationSquare").css("cursor", "pointer");
    spotlightCount = $("#spotlightWindow > .spotlightImageHost").length;

    resetNavigationSquares();
    showNextSpotlight();
});