$(document).ready(function () {

    $.getJSON(_bannerUrl, function (data) {

        $.each(data, function (i) {
            // Skip the first banner as that will have been rendered by the view
            if (i > 0) {
                var newBanner = $("<div class='banner' style='display:none;'></div>");
                newBanner.append("<img class='bannerPicture' src='" + _bannerBaseLocation + this.ImageUrl + "' alt='" + this.Title + "' />");
                newBanner.append("<div class='bannerText'></div>");
                newBanner.find("div.bannerText").append("<span class='bannerTitle'>" + this.RichTitle + "</span>");
                newBanner.find("div.bannerText").append("<span class='bannerSummary'>" + this.RichText + "</span>");
                if (this.Url != "") {
                    newBanner.find("div.bannerText").append("<a class='readmore' href='" + this.Url + "'>read more &gt;</a>");
                }

                $("div#bannerContainer > div.twelvecol").append(newBanner);
            }
        });
    });

    setInterval(function () {

        var banners = $("div#bannerContainer div.banner");
        var bannerCount = banners.length;

        var oldBanner = undefined;
        var newBanner = undefined;
        var reset = false;

        banners.each(function (i) {
            var banner = $(this);
            if (banner.css("display") == "block") {
                oldBanner = banner;
                newBanner = oldBanner.next("div.banner");
            }
        });

        if (newBanner.length == 0) {
            newBanner = banners.first("div.banner");
            reset = true;
        }

        if ($.browser.msie && $.browser.version <= 8) {
            // just switch the banners over instantly
            newBanner.show();
            oldBanner.hide();
        }
        else {
            // move the current banner forwards
            oldBanner.css("z-index", "2");

            // bring in new banner behind old one
            if (reset) {
                newBanner.show();
                oldBanner.css("top", "-270px");
            }
            else {
                newBanner.css("top", "-270px");
                newBanner.show();
            }

            // finally, fade out and remove the top level banner
            oldBanner.fadeOut("slow", function () {
                oldBanner.hide();
                oldBanner.css("z-index", "");
                oldBanner.css("top", "");
                newBanner.css("top", "");
            });
        }
    },
    8000);
});