//AJAX Request has started.  Use this for MVC AJAX ( ex: Ajax.ActionLink();)
function beginAJAXRequest(args) {

    //Get the element that is being updated
    var elementToUpdate = $("#" + args.get_updateTarget().id);

    showAnimation(elementToUpdate);
 
}


//AJAX Request has completed successfully.  Use this for MVC AJAX ( ex: Ajax.ActionLink();)
function successAJAXRequest(args) {

    //Get the element that is being updated
    var elementToUpdate = $("#" + args.get_updateTarget().id);

    hideAnimation(elementToUpdate);

}


//AJAX Request has errored.  Use this for MVC AJAX ( ex: Ajax.ActionLink();)
function errorAJAXRequest() {

    alert("Could not complete your request");

}

//Show the AJAX animation
function showAnimation(elementToUpdate) {

    var offset = elementToUpdate.offset();

    //Get the coordinates of the element to update
    var topY = offset.top;
    var leftX = offset.left;
    var width = elementToUpdate.width();
    var 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();
    var AJAXAnimationWidth = elementToUpdate.width();
    var AJAXAnimationHeight = elementToUpdate.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("display", "block");
    AJAXAnimation.css("background-color", "#FFFFFF");
    //AJAXAnimation.css("top", topAdjusted);
    //AJAXAnimation.css("left", leftAdjusted);
    AJAXAnimation.css("top", topY);
    AJAXAnimation.css("left", leftX);
    AJAXAnimation.css("width", AJAXAnimationWidth);
    AJAXAnimation.css("height", AJAXAnimationHeight);

    //Set the Updating element styles
    //for ie8 to work properly, you have to apply changes to the children
//    elementToUpdate.children().each(function(intIndex) {
//        $(this).fadeTo(1, 0.3);
//    });
    //elementToUpdate.fadeTo(100, 0.3);
    AJAXAnimation.fadeTo(100, 0.8);
}

//Hide the AJAX animation
function hideAnimation(elementToUpdate) {

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

    //Set the AJAXAnimation div style properties
    AJAXAnimation.css("display", "none");

    //Set the Updating element styles
//    elementToUpdate.children().each(function(intIndex) {
//        $(this).fadeTo(1, 1.0);
//    });
    //elementToUpdate.fadeTo("fast", 1.0);
    AJAXAnimation.fadeTo(100, 0.0);
}