// create the animated banner object
function AnimatedBanner(BannerElementId, direction) {
    this.mDirection = "up";
    if (direction != null) {
        if (direction == "up" || direction == "down" || direction == "left" || direction == "right") {
            this.mDirection = direction;
        }
    }
    this.mContainer = document.getElementById(BannerElementId);
    this.mCurrentIndex = -1;
    this.mItems = new Array();

    for (var i = 0; i < this.mContainer.childNodes.length; i++) {
        // make sure the elements are the correct types
        if (this.mContainer.childNodes[i].nodeType == 1) {
            this.mItems[this.mItems.length] = this.mContainer.childNodes[i];
        }
    }
}

AnimatedBanner.prototype.AnimatedBannerNext = function() {
    if (this.mCurrentIndex != -1) {
        var o = $(this.mItems[this.mCurrentIndex])
        switch (this.mDirection) {
            case "up": o.animate({ top: -o.height() }, 1000); break;
            case "down": o.animate({ top: o.height() }, 1000); break;
            case "left": o.animate({ left: -o.width() }, 1000); break;
            case "right": o.animate({ left: o.width() }, 1000); break;
        }
    }
    this.mCurrentIndex++;
    if (this.mCurrentIndex >= this.mItems.length) {
        this.mCurrentIndex = 0;
    }
    var i = $(this.mItems[this.mCurrentIndex])
    switch (this.mDirection) {
        case "up": i.css({ top: i.height() }).show().animate({ top: 0 }, 1000); break;
        case "down": i.css({ top: -i.height() }).show().animate({ top: 0 }, 1000); break;
        case "left": i.css({ left: i.width() }).show().animate({ left: 0 }, 1000); break;
        case "right": i.css({ left: -i.width() }).show().animate({ left: 0 }, 1000); break;
    }
}

var banner = null;

function InitializeAnimatedBanner(bannerContainerId, direction) {
    banner = new AnimatedBanner(bannerContainerId, direction);
    this.AnimateBanner();
}

function AnimateBanner() {
    banner.AnimatedBannerNext();
    window.setTimeout(AnimateBanner, 5000);
}