//Show the AJAX animation
function showAnimation(elementToUpdateId, isModal, ajaxMessage) {

    var offset;
    var topY;
    var leftX;
    var width;
    var height;

    //Set the Animation message
    if (ajaxMessage == "" || ajaxMessage == undefined) {
        ajaxMessage = "Performing your request...";
    }

    $("#AJAXMessage").html(ajaxMessage);
    
    //If animation is modal then center it on the page else center it on the element
    if (isModal) {
        
        //Get the coordinates of the document
        topY = 0;
        leftX = 0;
        width = $(document).width();
        height = $(document).height();

        $("#AJAXAnimationOverlay").css("z-index", "100005");
        $("#AJAXAnimationOverlay").css("height", height);
        $("#AJAXAnimationOverlay").css("width", width);
        $("#AJAXAnimationOverlay").show();

        //See how far the page has been scrolled
        topY = $(document).scrollTop();
        leftX = $(document).scrollLeft();

        //Set the height and width to the viewable window.
        height = $(window).height();
        width = $(window).width();

        
    } else {
    
        var elementToUpdate = $("#" + elementToUpdateId);
    
        offset = elementToUpdate.offset();

        //Get the coordinates of the element to update
        topY = offset.top;
        leftX = offset.left;
        width = elementToUpdate.width();
        height = elementToUpdate.height();
    }
    

    //Get the AJAXAnimation element
    var AJAXAnimation = $("#AJAXAnimation");

    //Get the height and width of the AJAXAnimation
    var AJAXAnimationWidth = AJAXAnimation.width();
    var AJAXAnimationHeight = AJAXAnimation.height();

    //Set the adjusted top and left for the ajax animation
    var topAdjusted = (topY + (height / 2)) - (AJAXAnimationHeight / 2);
    var leftAdjusted = (leftX + (width / 2)) - (AJAXAnimationWidth / 2);

    //Set the AJAXAnimation div style properties
    AJAXAnimation.css("z-index", "1000010");
    AJAXAnimation.css("display", "block");
    AJAXAnimation.css("top", topAdjusted);
    AJAXAnimation.css("left", leftAdjusted);
}

//Hide the AJAX animation
function hideAnimation() {

    //Get the AJAXAnimation element
    var AJAXAnimation = $("#AJAXAnimation");

    //Set the AJAXAnimation div style properties
    AJAXAnimation.hide();

    //Hide the overlay
    $("#AJAXAnimationOverlay").hide();
}