function InitializeChallengeBox(challenges) {
    for (var i = 0; i < challenges.length; i++) {
        InitializeChallengeBoxSingle(challenges[i]);
    }
}

function InitializeChallengeBoxSingle(challenge) {
    var slideshowDelay = 3000;
    var slideshowTimeoutId = 0;
    var currentIndex = challenge.CurrentIndex;
    var challenge = challenge;

    var $challengeContainer;
    var $thumbnailContainer;
    var $thumbnailElement;
    var $transitionDiv;

    $(document).ready(function() {
        $("#" + challenge.ElementID).bind("mouseenter", function() {
            $challengeContainer = $(this);
            if (challenge["Thumbnails"].length > 1)
                StartSlideshow();
            $challengeContainer.addClass('selected', true);

        }).bind("mouseleave", function() {
            $challengeContainer = $(this);
            if (challenge["Thumbnails"].length > 1)
                StopSlideshow();
            $challengeContainer.removeClass('selected', false);

        });
    });

    function StartSlideshow() {
        $thumbnailContainer = $challengeContainer.find(".thumbnailContainer");
        $thumbnailElement = $challengeContainer.find(".thumbnail");

        if (slideshowTimeoutId == 0) //prevent duplicate schedule
            ScheduleNextSlideshowChange();
    }

    function StopSlideshow() {
        window.clearTimeout(slideshowTimeoutId);
        slideshowTimeoutId = 0;
    }

    function ScheduleNextSlideshowChange() { slideshowTimeoutId = window.setTimeout(DisplayNext, slideshowDelay); }

    function DisplayNext() {
        var newIndex = (currentIndex + 1) % (challenge["Thumbnails"].length - 1);
        ChangeEntry(newIndex);
        ScheduleNextSlideshowChange();
    }

    function ChangeEntry(newIndex) {
        var prevThumbnail = challenge["Thumbnails"][currentIndex];
        var activeThumbnail = challenge["Thumbnails"][newIndex];

        if ($transitionDiv) {
            $transitionDiv.remove();
        }

        $transitionDiv = $("<div/>").
            addClass("animationBackground").
            css("overflow", "hidden").
            css("width", prevThumbnail.entryImgWidth + "px").
            css("height", prevThumbnail.entryImgHeight + "px");

        $thumbnailElement.attr("src", activeThumbnail.entryImgSrc).hide();
        $thumbnailContainer.append($transitionDiv);

        var animParams = {
            width: activeThumbnail.entryImgWidth + "px",
            height: activeThumbnail.entryImgHeight + "px"
        };

        currentIndex = newIndex;

        $transitionDiv.animate(animParams, "normal", "linear", animationDone);

        function animationDone() {
            $transitionDiv.remove();
            $thumbnailElement.
            css("width", activeThumbnail.entryImgWidth + "px").
            css("height", activeThumbnail.entryImgHeight + "px").
            fadeIn();
        }
    }
}

function Challenges(
    elementID,
    ID,
    URL,
    currentIndex,
    thumbnails) {
    this.ElementID = elementID;
    this.ID = ID;
    this.URL = URL;
    this.CurrentIndex = currentIndex;
    this.Thumbnails = thumbnails;
}

function Thumbnails(
    entryImgSrc,
    entryImgWidth,
    entryImgHeight) {
    this.entryImgSrc = entryImgSrc;
    this.entryImgWidth = entryImgWidth;
    this.entryImgHeight = entryImgHeight;
}