var rotatingFeatureCount;
var rotatingFeatureDelay = '10s'; // Default value - overriden by server-side value based on the Delay property in RotatingFeature.ascx
var rotatingFeatureMaxRotations = 20;  // Default value - overriden by server-side value based on the MaxRotations property in RotatingFeature.ascx

$(function() {
    rotatingFeatureCount = $('div#RotatingFeatureContainer div.Feature').length;
    var spotlightIds = new Array();
    $('div#RotatingFeatureContainer div.Feature').each(function() {
        spotlightIds.push($(this).attr("_spotlightid"));
    });
    if (rotatingFeatureCount > 1) {
        // Wire up automatic rotation
        $("div#RotatingFeatureContainer").everyTime(
            rotatingFeatureDelay,
            "RotatingFeatureTimer",
            function() {
                currentItem = parseInt($('div#RotatingFeatureController a.On img').attr("alt"));
                // Hide the current item
                featureHide($('div#RotatingFeatureController a')[currentItem - 1]);
                // Show the next item
                currentItem += 1;
                if (currentItem > rotatingFeatureCount) currentItem = 1;
                featureShow($('div#RotatingFeatureController a')[currentItem - 1]);
            },
            rotatingFeatureMaxRotations
        );
        // Stop automatic rotation on hover
        $('div#RotatingFeatureContainer').hover(function() {
            $("div#RotatingFeatureContainer").stopTime("RotatingFeatureTimer");
        });
        // Add navigation links
        for (var i = 1; i < rotatingFeatureCount + 1; i++) {
            $('div#RotatingFeatureController').append(String.format('<a href="#{0}"><img src="/Images/70x70/Spotlight/Photo/{1}" alt="{0}" /></a>', i, spotlightIds[i - 1]));
        }
        // Highlight the first item
        featureShow($('div#RotatingFeatureController a')[0]);
        $('div#RotatingFeatureController').fadeIn('slow');
        // Wire up hover on navigation links
        $('div#RotatingFeatureController a').hover(function() {
            if ($(this).hasClass('On') == false) {
                featureHide($('div#RotatingFeatureController a.On')[0]);
                featureShow(this);
            }
        });
    }
});

featureShow = function(linkElement) {
    var thumbnailImage = $('img', linkElement)[0];
    $('div#RotatingFeatureController a').removeClass('On');
    featureId = parseInt($("img", linkElement).attr("alt"));
    $(thumbnailImage).stop(true, true).animate({
        width: 70,
        height: 70
    }, 200);
    $(linkElement).addClass('On');
    $($('div#RotatingFeatureContainer div.Feature')[featureId - 1]).fadeIn('slow');
};

featureHide = function(linkElement) {
    var thumbnailImage = $('img', linkElement)[0];
    $(thumbnailImage).stop(true, true).animate({
        width: 40,
        height: 40
    }, 200);
    featureId = parseInt($("img", linkElement).attr("alt"));
    $($('div#RotatingFeatureContainer div.Feature')[featureId - 1]).fadeOut('slow');
};