function WinnerStrip(totalVisible, winners)
{

    var $entryLink;
    var $entryImage;
    var $entryTitle;
    var $ownerName;
    var $challengeTitle;
    var $scrollbar;
    var $transitionDiv = null;

    var slideshowDelay = 5000;

    var slideshowTimeoutId;
    var selectedEntryIdx = 0;
    var firstVisibleIndex = 0;

    $(document).ready(function()
    {
        if (winners)
        {
        
            var $winnerBox = $("div#hpWinnerBox");
            $entryLink = $winnerBox.find("div.entryImage a");
            $entryImage = $winnerBox.find("div.entryImage a img");
            $entryTitle = $winnerBox.find(".entryTitle");
            $ownerName = $winnerBox.find(".ownerName");
            $challengeTitle = $winnerBox.find(".challengeTitle");
            $scrollbar = $winnerBox.find(".scrollbar");

            preloadImages();
            bindOnClicks();
            scheduleNextSlidshowChange();
            initScrollbar();

        }
    });
    
    function preloadImages()
    {
        for (var i = 0; i < winners.length; i++)
        {
            var img = new Image();
            img.src = winners[i].entryImgSrc;
        }
    }
    
    function bindOnClicks()
    {
        for (var i = 0; i < winners.length; i++)
        {
            $("#" + winners[i].winnerListElementId).
                data("entryIndex", i).
                click(entryClick);
        }
    }
    
    function initScrollbar()
    {
    
        var $slider = $scrollbar.find("div.innerRail");
        
        var maxScrollbarValue = winners.length - totalVisible;
        
        $slider.slider({
            min: 0,
            max: maxScrollbarValue,
            value: maxScrollbarValue,
            orientation: "vertical",
            animate: true,
            start: stopSlideshow,
            slide: scrollbarChanged });
            
        $scrollbar.find("a.arrowUp").click(function(e) {
            stopSlideshow();
            var value = $slider.slider("value");
            if (value < maxScrollbarValue)
            {
                $slider.slider("value", value + 1);
                scrollListTo(maxScrollbarValue - (value + 1));
            }
        });
        
        $scrollbar.find("a.arrowDn").click(function(e) {
            stopSlideshow();
            var value = $slider.slider("value");
            if (value > 0)
            {
                $slider.slider("value", value - 1);
                scrollListTo(maxScrollbarValue - (value - 1));
            }
        });

    }

    function scrollbarChanged(e, ui)
    {
        scrollListTo(winners.length - totalVisible - ui.value);
    }
    
    function scrollListTo(newFirstVisible)
    {
        for (var i = 0; i < newFirstVisible; i++)
        {
            $("#" + winners[i].winnerListElementId).hide();
        }
        for (var i = newFirstVisible; i < newFirstVisible + totalVisible; i++)
        {
            $("#" + winners[i].winnerListElementId).show();
        }
        for (var i = newFirstVisible + totalVisible; i < winners.length; i++)
        {
            $("#" + winners[i].winnerListElementId).hide();
        }
        firstVisibleIndex = newFirstVisible;
    }
   
    function scheduleNextSlidshowChange()
    {
        slideshowTimeoutId = window.setTimeout(gotoNext, slideshowDelay);
    }
    
    function gotoNext()
    {
        var newSelectedEntryIndex = (selectedEntryIdx + 1) % winners.length;
        ensureVisible(newSelectedEntryIndex);
        changeEntry(newSelectedEntryIndex);
        scheduleNextSlidshowChange();
    }
    
    function stopSlideshow()
    {
        window.clearTimeout(slideshowTimeoutId);
    }

    function entryClick()
    {
        var entryIndex = $(this).data("entryIndex");
        if (entryIndex != selectedEntryIdx)
        {
            stopSlideshow();
            changeEntry(entryIndex);
        }
        else
        {
            location.href = winners[entryIndex].challengeLink;
        }
    }
    
    function ensureVisible(entryIndex)
    {
        if (entryIndex < firstVisibleIndex)
        {
            $scrollbar.slider("moveTo", entryIndex, 0);
            scrollListTo(entryIndex);
        }
        else if (firstVisibleIndex + totalVisible <= entryIndex)
        {
            $scrollbar.slider("moveTo", entryIndex - totalVisible + 1, 0);
            scrollListTo(entryIndex - totalVisible + 1);
        }    
    }
    
    function changeEntry(entryIndex, updateScrollbar)
    {
    
        var winnerEntry = winners[entryIndex];

        if ($transitionDiv)
        {
            $transitionDiv.remove();
        }
    
        $transitionDiv = $("<div/>").
            addClass("animationBackground").
            css("overflow", "hidden").
            css("width", winners[selectedEntryIdx].entryImgWidth + "px").
            css("height", winners[selectedEntryIdx].entryImgHeight + "px");
        
        $entryImage.hide().remove();
        $entryLink.append($transitionDiv);
            
        var animParams = {
            width: winnerEntry.entryImgWidth + "px",
            height: winnerEntry.entryImgHeight + "px" };
        
        $("#" + winners[entryIndex].winnerListElementId).addClass("selected");
        $("#" + winners[selectedEntryIdx].winnerListElementId).removeClass("selected");
        selectedEntryIdx = entryIndex;

        $entryLink.attr("href", winnerEntry.entryLink);
        $entryTitle.text(winnerEntry.entryTitle);
        $ownerName.text(winnerEntry.entryOwner);
        $challengeTitle.text(winnerEntry.challengeTitle);
        
        $transitionDiv.animate(animParams, "normal", "linear", animationDone);
    
        function animationDone()
        {
            $transitionDiv.remove();
            $entryImage.appendTo($entryLink).
                attr("src", winnerEntry.entryImgSrc).
                attr("width", winnerEntry.entryImgWidth).
                attr("height", winnerEntry.entryImgHeight).
                fadeIn();
        }

    }
    
    function getWinnerEntryById(entryId)
    {
        for (var i = 0; winners.length; i++)
        {
            var winnerEntry = winners[i];
            if (entryId == winnerEntry.entryId)
            {
                return winnerEntry;
            }
        }
        return null;
    }

}

function WinnerEntry(
    winnerListElementId,
    entryId,
    entryLink,
    entryImgSrc,
    entryImgWidth,
    entryImgHeight,
    entryTitle,
    entryOwner,
    challengeTitle,
    challengeLink)
{
    this.winnerListElementId = winnerListElementId;
    this.entryId = entryId;
    this.entryLink = entryLink;
    this.entryImgSrc = entryImgSrc;
    this.entryImgWidth = entryImgWidth;
    this.entryImgHeight = entryImgHeight;
    this.entryTitle = entryTitle;
    this.entryOwner = entryOwner;
    this.challengeTitle = challengeTitle;
    this.challengeLink = challengeLink;
}