var pnlOverlay;
var pnlPopUp;

function displayModal( backgroundPanel, popupPanel )
{
    pnlOverlay = document.getElementById(backgroundPanel);
    pnlPopUp = document.getElementById(popupPanel);
    
    pnlOverlay.style.display = 'block';
    pnlPopUp.style.display = 'block';
    
    document.documentElement.style.overflow = 'hidden';
    placeModal();
}

function cancelModal( backgroundPanel, popupPanel )
{
    document.getElementById(backgroundPanel).style.display = 'none';
    document.getElementById(popupPanel).style.display = 'none';
    document.documentElement.style.overflow = 'auto';
    window.onresize = null;
}

function placeModal()
{
    if (!pnlPopUp || pnlPopUp.style.display == 'none')
        return;

    var clientHeight = document.documentElement.clientHeight;
    var clientWidth = document.documentElement.clientWidth;
    var totalHeight = document.documentElement.scrollHeight;
    var totalWidth = document.documentElement.scrollWidth;
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;

    pnlOverlay.style.height = (totalHeight > clientHeight ? totalHeight : clientHeight) + 'px';
    pnlOverlay.style.width = (totalWidth > clientWidth ? totalWidth : clientWidth) + 'px';

    pnlPopUp.style.top = (scrollTop + ((clientHeight-pnlPopUp.clientHeight)/2)) < 1 ? '1px' : scrollTop + ((clientHeight-pnlPopUp.clientHeight)/2) + 'px';
    pnlPopUp.style.left = (scrollLeft + ((clientWidth-pnlPopUp.clientWidth)/2)) < 1 ? '1px' : scrollLeft + ((clientWidth-pnlPopUp.clientWidth)/2) + 'px';

    window.onresize = function(){placeModal()};
}