//This function uses the jquery library to scroll the alerts up and down.
$(document).ready(function(){
    var alert_pointer = 1;
    
    //If down arrow is clicked, fade out top alert and call slide_up() function
    $("#scrollAlertsUp").click(function(){
        if ( $("#alert_" + (alert_pointer + 3)).length > 0 ){
            disable();
            $("#alert_" + alert_pointer).animate({"opacity": "0"}, 150, slide_up);
            alert_pointer++;                    
        }
    });
    
    //Slide alerts up and call animate_bottom_in() function
    function slide_up(){
        $("#alert_slider").animate({"top": "-=48px"}, 400, animate_bottom_in);
    };
    
    //Fade in bottom alert
    function animate_bottom_in(){
        $("#alert_" + (alert_pointer + 2)).animate({"opacity": "100"}, 100, enable);
    };
    //----------------
    
    //If up arrow is clicked, fade out bottom alert and call slide_down() function      
    $("#scrollAlertsDown").click(function(){
        if ( $("#alert_" + (alert_pointer - 1)).length > 0 ){
            disable();
            $("#alert_" + (alert_pointer + 2)).animate({"opacity": "0"}, 150, slide_down);
            alert_pointer--;                    
        }
    });
    
    //Slide alerts down and call animate_top_in() function
    function slide_down(){
        $("#alert_slider").animate({"top": "+=48px"}, 400, animate_top_in);
    };
    
    //Fade in top alert
    function animate_top_in(){
        $("#alert_" + alert_pointer).animate({"opacity": "100"}, 100, enable);
    };
    //----------------
    
    //Disable up/down buttons while alerts are animating
    function disable(){
        document.getElementById("disable").style.zIndex = "2";
    }
    
    //Enable up/down buttons after alerts have finished animation
    function enable(){
        document.getElementById("disable").style.zIndex = "-1";
    }
  
});