function WinnerStrip(totalVisible, winners) {

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

    var slideshowDelay = 7000;

    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");
            if(winners.length <=5 ) {
                 $scrollbar.addClass("hiddenScroller").css("display", "none")
            }
            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 scheduleNextSlidshowChange() {
        slideshowTimeoutId = window.setTimeout(gotoNext, slideshowDelay);
    }
    function scrollbarChanged(e, ui) {
        scrollListTo(ui.value);
    }


    function initScrollbar() {

        var $slider = $scrollbar.find("div.rail");

        $slider.slider({
            handle: "div.handle",
            min: 0,
            max: winners.length - totalVisible,
            steps: winners.length - totalVisible,
            animate: true,
            start: stopSlideshow,
            slide: function (e, ui) { scrollListTo(ui.value); }

        });

        $scrollbar.find("a.arrowUp").click(function(e) {
            stopSlideshow();
            $slider.slider("moveTo", "-=1", 0);
        });

        $scrollbar.find("a.arrowDn").click(function(e) {
            stopSlideshow();
            $slider.slider("moveTo", "+=1", 0);
        });

    }


    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 gotoNext() {
        var newSelectedEntryIndex = (selectedEntryIdx + 1) % winners.length;
        ensureVisible(newSelectedEntryIndex);
        changeEntry(newSelectedEntryIndex);
        scheduleNextSlidshowChange();
    }

    function stopSlideshow() {
        window.clearTimeout(slideshowTimeoutId);
        scheduleNextSlidshowChange();
    }

    function entryClick() {
        var entryIndex = $(this).data("entryIndex");
        if (entryIndex != selectedEntryIdx) {
            stopSlideshow();
            changeEntry(entryIndex);
        }
    }

    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);
        $entryLink.attr("target", winnerEntry.entryOwner);
        $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) {
    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;
}