var ModalProgress =
{
    DialogCssClass : 'progress',
    DimCssClass : 'dimBackground',

    ProgressImage : '/dnsImages/indicator.gif',
    ProgressText : 'Loading, please wait...',

    _divModal : null,
    _divDim : null,

    show : function()
    {
        var divModal = ModalProgress._divModal;
        var divDim = ModalProgress._divDim;

        if (divModal == null)
        {
            divModal = document.createElement('div');

            divModal.className = ModalProgress.DialogCssClass;

            divModal.innerHTML =    '<div style=\"text-align:center;vertical-align:middle;padding-top:20px\">' +
                                    '<img alt=\"\" style=\"padding-right:4px\" src=\"' + ModalProgress.ProgressImage + '\" />' + 
                                    ModalProgress.ProgressText +
                                    '<div>';

            document.body.appendChild(divModal);
            ModalProgress._divModal = divModal;
        }

        if (divDim == null)
        {
            divDim = document.createElement('div');

            divDim.className = ModalProgress.DimCssClass;
            document.body.appendChild(divDim);
            ModalProgress._divDim = divDim;
        }

        divModal.style.display = '';
        divDim.style.display = '';

        var modalBounds = Sys.UI.DomElement.getBounds(divModal);

        var viewPortWidth = ModalProgress._getViewPortWidth();
        var viewPortHeight = ModalProgress._getViewPortHeight();
        var contentHeight = ModalProgress._getContentHeight();

        var x = Math.round((viewPortWidth - modalBounds.width)/ 2);
        var y = Math.round((viewPortHeight - modalBounds.height)/ 2);

        divDim.style.width = viewPortWidth + 'px';
        divDim.style.height = Math.max(viewPortHeight, contentHeight) + 'px';

        Sys.UI.DomElement.setLocation(divModal, x, y);
        Sys.UI.DomElement.setLocation(divDim, 0, 0);
    },

    hide : function()
    {
        ModalProgress._divModal.style.display = 'none';
        ModalProgress._divDim.style.display = 'none';
    },

    _getViewPortWidth : function()
    {
        var width = 0;

        if ((document.documentElement) && (document.documentElement.clientWidth))
        {
            width = document.documentElement.clientWidth;
        }
        else if ((document.body) && (document.body.clientWidth))
        {
            width = document.body.clientWidth;
        }
        else if (window.innerWidth)
        {
            width = window.innerWidth;
        }

        return width;
    },

    _getViewPortHeight : function()
    {
        var height = 0;

        if (window.innerHeight)
        {
            height = window.innerHeight;
        }
        else if ((document.documentElement) && (document.documentElement.clientHeight))
        {
            height = document.documentElement.clientHeight;
        }
        else if ((document.body) && (document.body.clientHeight))
        {
            height = document.body.clientHeight;
        }

        return height;
    },

    _getContentHeight : function()
    {
        if ((document.body) && (document.body.offsetHeight))
        {
            return document.body.offsetHeight;
        }

        return 0;
    }
}

Sys.Net.WebRequestManager.add_invokingRequest(function(){ModalProgress.show();});
Sys.Net.WebRequestManager.add_completedRequest(function(){ModalProgress.hide();});