$(function(){

    // these values can be changed to alter the time before the first transition
    // and all successive transitions: 1000 = 1 second
    var starttime = 3000;
    var timetween = 5000;

    var banners = new Array();
    
    function pushBanners(){
        $("#rotatePromo>div").each(function(){
            banners.push(this.id);
        });
    }
    
    function hideBanners(show){
        for(var i = 0; i < banners.length; i++){
            if(banners[i] != show){
                var elm = document.getElementById(banners[i]);
                if(elm){ elm.style.display = "none"; }
            }
        }
    }
    
    function showNext(){
        var toShow = "";
        for(var i = 0; i < banners.length; i++){
            if($("#"+banners[i]).css("display") == "block"){
                if(i == banners.length-1){
                    toShow = banners[0];
                }
                else{
                    toShow = banners[i+1];
                }
                break;
            }
        }
        showBanner(toShow);
    }
    
    function showBanner(id){
        for(var i = 0; i < banners.length; i++){
            var elm = document.getElementById(banners[i]);
            if(elm){
                if(banners[i] == id){
                    elm.style.zIndex = "30";
                }
                else{
                    elm.style.zIndex = "20";
                }
            }
        }
    
        $("#" + id).fadeIn(1000, function(){hideBanners(id)});
        //setTimeout(function(){hideBanners(id)},1000);
        
        setTimeout(function(){showNext()}, timetween);
    }
    
    pushBanners();
    setTimeout(function(){hideBanners(banners[0])},200);
    setTimeout(function(){showNext()},starttime);

});