// A Modal popup in javascript

function ModalPopup(eleId, loffset, toffset)
{
    this.Height = 0;
    this.Width = 0;
    this.Mask = document.createElement('div');
    this.MsgBox = document.getElementById(eleId);
    this.eleId = eleId;
    this.Loffset = (loffset != 'undefined') ? loffset : 0;
    this.Toffset = (toffset != 'undefined') ? toffset : 0;
    this.YOffset = 0;

    this.GetSize = function() {
        if (typeof (window.innerHeight) == 'number') {
            this.Height = window.innerHeight;
            this.Width = window.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth) {
            this.Height = document.documentElement.clientHeight;
            this.Width = document.documentElement.clientWidth;
        }
        else if (document.body && document.body.clientWidth) {
            this.Height = document.body.clientHeight;
            this.Width = document.body.clientWidth;
        }
    };

    this.SetMask = function() {
        this.GetSize();
        if (this.Mask.style.setAttribute)
            this.Mask.style.setAttribute('cssText', 'position: absolute; top:' + this.Toffset.toString() + 'px; left:' + this.Loffset.toString() + 'px; height:' + this.Height + 'px; width:' + this.Width + 'px; opacity:.7; filter:alpha(opacity=70); display:none; background-color:#000000; z-index=99;');
        else
            this.Mask.setAttribute('style', 'position: absolute; top:' + this.Toffset.toString() + 'px; left:' + this.Loffset.toString() + 'px; height:' + this.Height + 'px; width:' + this.Width + 'px; opacity:.7; filter:alpha(opacity=70); display:none; background-color:#000000; z-index=99;');
        this.Mask.setAttribute('id', 'daMask');
        if (this.MsgBox) {
            this.MsgBox.style.top = (parseInt((parseInt(this.Mask.style.height) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.height) / 2).toString()) + this.Toffset).toString() + 'px';
            this.MsgBox.style.left = (parseInt((parseInt(this.Mask.style.width) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.width) / 2).toString()) + this.Loffset).toString() + 'px';
        }
    };this.SetMask();

    this.Resize = function() {
        this.GetSize();
        this.MsgBox = document.getElementById(this.eleId);
        this.Mask.style.width = this.Width + 'px';
        this.Mask.style.height = this.Height + 'px';
        if (this.MsgBox) {
            this.MsgBox.style.top = (parseInt((parseInt(this.Mask.style.height) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.height) / 2).toString()) + this.Toffset).toString() + 'px';
            this.MsgBox.style.left = (parseInt((parseInt(this.Mask.style.width) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.width) / 2).toString()) + this.Loffset).toString() + 'px';
        }

    };
    document.body.appendChild(this.Mask);

    this.Show = function() {
        this.Mask.style.display = 'block';
        this.MsgBox = document.getElementById(this.eleId);
        if (this.MsgBox) {
            this.MsgBox.style.top = (parseInt((parseInt(this.Mask.style.height) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.height) / 2).toString()) + this.Toffset).toString() + 'px';
            this.MsgBox.style.left = (parseInt((parseInt(this.Mask.style.width) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.width) / 2).toString()) + this.Loffset).toString() + 'px';
            this.MsgBox.style.display = 'block';
        }
        this.KeepPosition();
        this.HideBadElements();
    };

    this.Hide = function() {
        this.Mask.style.display = 'none';
        this.MsgBox = document.getElementById(this.eleId);
        if (this.MsgBox)
            this.MsgBox.style.display = 'none';
        this.ShowBadElements();
    };

    this.KeepPosition = function() {
        if (document.body.scrollLeft) {
            this.Mask.style.top = document.body.scrollTop + this.Toffset + 'px';
            this.Mask.style.left = document.body.scrollLeft + this.Loffset + 'px';
            this.MsgBox.style.top = (parseInt((parseInt(this.Mask.style.height) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.height) / 2).toString()) + this.Toffset + document.body.scrollTop).toString() + 'px';
            this.MsgBox.style.left = (parseInt((parseInt(this.Mask.style.width) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.width) / 2).toString()) + this.Loffset + document.body.scrollLeft).toString() + 'px';
        }
        else if (document.documentElement && document.documentElement.scrollTop) {
            this.Mask.style.top = document.documentElement.scrollTop + this.Toffset + 'px';
            this.Mask.style.left = document.documentElement.scrollLeft + this.Loffset + 'px';
            this.MsgBox.style.top = (parseInt((parseInt(this.Mask.style.height) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.height) / 2).toString()) + this.Toffset + document.documentElement.scrollTop).toString() + 'px';
            this.MsgBox.style.left = (parseInt((parseInt(this.Mask.style.width) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.width) / 2).toString()) + this.Loffset + document.documentElement.scrollLeft).toString() + 'px';
        }
        else if (window.pageYOffset) {
            this.Mask.style.top = window.pageYOffset + this.Toffset + 'px';
            this.Mask.style.left = window.pageXOffset + this.Loffset + 'px';
            this.MsgBox.style.top = (parseInt((parseInt(this.Mask.style.height) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.height) / 2).toString()) + this.Toffset + window.pageYOffset).toString() + 'px';
            this.MsgBox.style.left = (parseInt((parseInt(this.Mask.style.width) / 2).toString()) - parseInt((parseInt(this.MsgBox.style.width) / 2).toString()) + this.Loffset + window.pageXOffset).toString() + 'px';
        }
    };

    this.HideBadElements = function() {
        var badelements = document.getElementsByTagName('select');
        for (var q = 0; q < badelements.length; ++q) {
            badelements[q].style.display = 'none';
        }
    };

    this.ShowBadElements = function() {
        var badelements = document.getElementsByTagName('select');
        for (var q = 0; q < badelements.length; ++q) {
            badelements[q].style.display = 'inline';
        }
    };
    window.onscroll = this.KeepPosition;
    window.onresize = this.Resize;
    return this;
}