var modalWrapper,modal,modalContent,mask,initMaskHeight;

window.onscroll = MoveModal;

window.onresize = MoveModal;


function OpenModal(width, padding) {

	SetModalProperties();

    modal.style.width = width + "px";
    modalContent.style.width = (parseInt(width) - (parseInt(padding) * 2)) + "px";
    modalContent.style.padding = padding + "px";
	modalWrapper.style.width = width + "px";
	modalWrapper.style.height = (GetClientWidthHeight()[1] / 2) + "px";

    if (modal.style.display == "none") {
        modal.style.display = "block";
        modalWrapper.style.display = "block";
        mask.style.display = "block";
    }
	MoveModal();
}

function CloseModal() {
    if (modal.style.display == "block") {
        modal.style.display = "none";
        modalWrapper.style.display = "none";
        mask.style.display = "none";
    }
}

function MoveModal()
{
	if(GetScrollXY()[1] < parseInt(initMaskHeight))
	{
		mask.style.width = GetClientWidthHeight()[0] + "px";
		modalWrapper.style.left = (((GetClientWidthHeight()[0]/2)-parseInt(modalWrapper.style.width)/2) + GetScrollXY()[0]) + "px";
		modalWrapper.style.top = ((((GetClientWidthHeight()[1]/2)-parseInt(modalWrapper.style.height)/2) + GetScrollXY()[1]) - 100) + "px";
	}
}

function GetScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function GetClientWidthHeight() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
    return [ myWidth, myHeight];
}

function SetModalProperties()
{
    modalWrapper = document.getElementById('modalWrapper');
    modal = document.getElementById('modal');
    modalContent = document.getElementById('modalContent');
    mask = document.getElementById('modalMask');

    modalWrapper.style.height = GetClientWidthHeight()[1] + "px";
    modalWrapper.style.width = GetClientWidthHeight()[0] + "px";
    mask.style.height = document.documentElement.scrollHeight + "px";
	initMaskHeight = document.documentElement.scrollHeight + "px";
    mask.style.width = GetClientWidthHeight()[0] + "px";
}