function PopulateBanner(listId, bannerId) {
    var listItems = new Array();
    if (document.getElementById(listId)) {
        // Get the entire list of items
        var currentlyDisplayedItem = $("#" + bannerId + " > div")[0];
        $("#" + listId + " hr").remove();
        $("#" + listId + " > div").each(function() {
            listItems.push(this);
        });

        // Look for the one that got randomly selected to display, pull it out, stick it on the bottom, then reverse the array so it's on the top (don't know how else to do this in js)
        for (var i = 0; i < listItems.length; i++) {
            if (listItems[i].getAttribute("id") == currentlyDisplayedItem.getAttribute("id")) {
                var displayedItem = listItems.splice(i, 1)[0];
                listItems.push(displayedItem);
                listItems.reverse();
                break;
            }
        }

        // Stuff the full list into the appropriate banner location
        $("#" + bannerId).html("");
        for (var i = 0; i < listItems.length; i++) {
            $("#" + bannerId).append(listItems[i]);
        }

        // Hide all but the first one
        $("#" + bannerId + " > div").not("#" + bannerId + " > div:first").css("display", "none");
    }
}

function AddLeftButtons(itemCollectionId) {
    var items = $("#" + itemCollectionId)
    if (items.find("div").not(".controls").size() > 1) {
        //items.append("<div class=\"controls\"><span class=\"prev\">&lt;</span>&nbsp<span class=\"next\">&gt;</span></div>");
        items.append("<span class=\"controls\"><p class=\"up\"><a href=\"#up\" class=\"next\" title=\"Previous\">Previous</a></p><p class=\"down\"><a href=\"#down\" class=\"prev\" title=\"Next\">Next</a></p></span>");
        items.find(".prev").click(function() { PrevItem(itemCollectionId) });
        items.find(".next").click(function() { NextItem(itemCollectionId) });
    }
}

function AddRightButtons(itemCollectionId) {
    var items = $("#" + itemCollectionId)
    if (items.find("div").not(".controls").size() > 1) {
        //items.append("<div class=\"controls\"><span class=\"prev\">&lt;</span>&nbsp<span class=\"next\">&gt;</span></div>");
        items.append("<span class=\"controls\"><p class=\"up rightside\"><a href=\"#up\" class=\"next\" title=\"Previous\">Previous</a></p><p class=\"down rightsidedown\"><a href=\"#down\" class=\"prev\" title=\"Next\">Next</a></p></span>");
        items.find(".prev").click(function() { PrevItem(itemCollectionId) });
        items.find(".next").click(function() { NextItem(itemCollectionId) });
    }
}

function NextItem(itemCollectionId) {
    var items = $("#" + itemCollectionId).find("div").not(".controls");
    if (items.size() != 1) {
        for (var i = 0; i < items.size(); i++) {
            if (items[i].style.display != "none") {
                items[i].style.display = "none";

                if (i + 1 == items.size()) {
                    items[0].style.display = "block";
                }
                else {
                    items[++i].style.display = "block";
                }
                break;
            }
        }
    }
}

function PrevItem(itemCollectionId) {
    var items = $("#" + itemCollectionId).find("div").not(".controls");
    if (items.size() != 1) {
        for (var i = items.size() - 1; i >= 0; i--) {
            if (items[i].style.display != "none") {
                items[i].style.display = "none";

                if (i - 1 < 0) {
                    items[items.size() - 1].style.display = "block";
                }
                else {

                    items[--i].style.display = "block";
                }
                break;
            }
        }
    }
}