$(document).ready(function() {

    
    //Load the transparent overlay and alert div
    $(".loadOverLay").click(function() {
        //load the white overlay.
        loadOverlay();

        //get the id of the alert element that is to be shown. 
        //This will be the 2 character prefix of the clicked element's id.
        var showElem = $(this).attr("id");

        //Show the alert box after a pre determined time.
        //setTimeout('showAlert(showElem)', 1000);
        setTimeout(function() { showAlert(showElem) }, 1000);
    });

    //Hide blanket overlay and alert boxes.
    $(".closeAlert").click(function() {
        $("#alertBoxWrapper").fadeOut("fast");
        $(".alertDetailsWrap").fadeOut("fast");
        $("#blanketOverlay").fadeOut("slow");
    });

    //Logic to show the alert box and to possibly fill it with data? 
    //For now the passed id of the clicked element matches that of the element to be displayed
    function showAlert(elementToShow) {
        //get the current page position in relation to the browser window.
        //We need to load the box in where the user can see it.
        //var scrollTop = $(window).scrollTop();
        //console.log(scrollTop);
        //if (scrollTop > 0) {
        //console.log("scrollTop is > 0");
        //$("#alertBoxWrapper").css({ top: scrollTop });
        //console.log($("#alertBoxWrapper").css('top'));
        //} else {
        //console.log("scrollTop = 0");
        //$("#alertBoxWrapper").css({ top: scrollTop });
        //console.log($("#alertBoxWrapper").css('top'));

        //}
        $("#alertBoxWrapper").fadeIn("fast");
        $("#alert_" + elementToShow).fadeIn("fast");

    }

});

//load the white overlay
function loadOverlay() {

    //get the height of the containing element and match the height of the overlay to it. 
    $("#blanketOverlay").css({ height: $("div.container").height() + "px" });
    //console.log($("div.container").height() + "px");
    //re-enforce the opacity setting for the blanket here for the benifit of IE. 
    $('#blanketOverlay').css('filter', 'alpha(opacity=85)');

    //fade in the overlay.
    $("#blanketOverlay").fadeIn("slow");
}

function submit(param) {
    alert("!");
}