﻿
function ModalDialog_Engine() {
    this.status = 'new';
    this.dialogWidth = 300;
    this.dialogHeight = 200;
    this.opacity = 0.6;
    this.opaqueColor = '#000';
}

ModalDialog_Engine.prototype = {
    
    construct : function() {
        if (typeof this.dialog == 'object') return;
        this.dialog = document.createElement('DIV');
        this.dialog.id = 'dialog';
        this.dialogContent = document.createElement('DIV');
        this.dialogContent.id = 'dialogcontent';
        this.dialogTitleBar = document.createElement('DIV');
        this.dialogTitleBar.id = 'dialogtitlebar';
        this.dialogTitle = document.createElement('DIV');
        this.dialogTitle.id = 'dialogtitle';
        this.dialogClose = document.createElement('DIV');
        this.dialogClose.id = 'dialogclose';
        this.dialogTitleBar.appendChild(this.dialogClose);
        this.dialogTitleBar.appendChild(this.dialogTitle);
        this.dialog.appendChild(this.dialogTitleBar);
        this.dialog.appendChild(this.dialogContent);
        this.opaque = document.createElement('DIV');
        this.opaque.id = 'opaque';
        this.overlay = document.createElement('DIV');
        this.overlay.id = 'overlay';
        this.overlay.style.width = '100%';
        this.overlay.style.position = 'absolute';
        this.overlay.style.top = '0px';
        this.overlay.style.left = '0px';
        this.overlay.style.zIndex = '1000';
        this.overlay.style.visibility = 'hidden';
        this.opaque.style.width = '100%';
        this.opaque.style.height = '100%';
        this.opaque.style.position = 'absolute';
        this.opaque.style.top = '0px';
        this.opaque.style.left = '0px';
        this.setOpacity(this.opacity);
        this.setOpaqueColor(this.opaqueColor);

        this.dialog.style.position = 'relative';
        this.dialog.style.marginLeft = 'auto';
        this.dialog.style.marginRight = 'auto';
        this.dialog.style.backgroundColor = '#fff';
        
        this.dialogTitleBar.style.position = 'relative';
        this.dialogTitleBar.style.height = '30px';
        this.dialogTitleBar.style.overflow = 'hidden';
        
        this.dialogClose.style.position = 'absolute';
        this.dialogClose.style.right = '0px';
        this.dialogClose.style.top = '0px';

        this.dialogContent.style.height = this.dialogHeight + 'px';
        this.dialogContent.style.position = 'relative';
        this.dialogContent.style.marginLeft = 'auto';
        this.dialogContent.style.marginRight = 'auto';

        this.overlay.appendChild(this.opaque);
        this.overlay.appendChild(this.dialog);
        document.body.appendChild(this.overlay);
        this.status = 'hidden';
        this.attachEvents();
    },
    
    attachEvents : function() {
        //mousedown
        this.overlay.onmousedown = function(e) {
            var t = ModalDialog.getTarget(e);
            switch(t.id) {
                case 'dialogclose' :
                    ModalDialog.hideModalDialog();
                    return false;
            }
        }
        //double click
        this.overlay.ondblclick = function(e) {
            var t = ModalDialog.getTarget(e);
        }
        //keypress
        this.overlay.onkeypress = function(e) {
            var t = ModalDialog.getTarget(e);
        }
    },
    
    getTarget : function(e) {
        e = e || window.event;
        return e.target || e.srcElement;
    },

    getKeyPressed : function(e) {
        e = e || window.event;
        return e.keyCode || e.which;
    },
    
    isCtrlKey : function(e) {
        e = e || window.event;
        return e.ctrlKey;
    },
    
    setOpacity : function(fOpacity) {
        this.opaque.style.opacity = fOpacity;
        this.opaque.style.MozOpacity = fOpacity;
        this.opaque.style.filter = 'alpha(opacity=' + parseInt(fOpacity * 100) + ')';
    },
    
    setOpaqueColor : function(fColor) {
        this.opaque.style.backgroundColor = fColor;
    },
    
    showModalDialog : function(dialogWidth, dialogHeight, dialogHTML, dialogOverflow, dialogTitle) {
        if (!this.exists()) this.construct();
        if (this.status == 'visible') return;
        var vp = ModalDialog.viewport();
        dialogHeight = (vp.height < dialogHeight) ? vp.height : dialogHeight;
        var dialogTop = Math.floor((vp.height - dialogHeight -  30) / 2);
        dialogTop += vp.scrollTop;
        this.overlay.style.height = ((vp.scrollHeight > vp.height) ? vp.scrollHeight : vp.height)+ 'px';
        this.dialog.style.width = dialogWidth + 'px';
        this.dialogContent.style.height = dialogHeight + 'px';
        if (typeof dialogHTML == 'string') this.dialogContent.innerHTML = dialogHTML;
        this.dialogContent.style.overflow = dialogOverflow;
        this.dialog.style.top = dialogTop + 'px';
        this.overlay.style.visibility = 'visible';
        this.dialogTitle.innerHTML = dialogTitle || '';
        this.status = 'visible';
    },
    
    hideModalDialog : function() {
        if (this.status == 'hidden') return;
        this.dialogContent.innerHTML = '';
        this.overlay.style.visibility = 'hidden';
        this.status = 'hidden';
    },
    
    viewport : function() {
        var dWidth = dHeight = sWidth = sHeight = sTop = sLeft = 0;
        if (typeof window.innerWidth != 'undefined') {
            dWidth = window.innerWidth;
            dHeight = window.innerHeight;
        }
        else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
            dWidth = document.documentElement.clientWidth;
            dHeight = document.documentElement.clientHeight;
        }
        else {
            dWidth = document.getElementsByTagName('body')[0].clientWidth;
            dHeight = document.getElementsByTagName('body')[0].clientHeight;
        }
        
          if( typeof( window.pageYOffset ) == 'number' ) {
            //Netscape compliant
            sTop = window.pageYOffset;
            sLeft = window.pageXOffset;
          } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
            //DOM compliant
            sTop = document.body.scrollTop;
            sLeft = document.body.scrollLeft;
          } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
            //IE6 standards compliant mode
            sTop = document.documentElement.scrollTop;
            sLeft = document.documentElement.scrollLeft;
          }
        
        sWidth = (document.documentElement.scrollWidth > document.getElementsByTagName('body')[0].scrollWidth) ? document.documentElement.scrollWidth : document.getElementsByTagName('body')[0].scrollWidth;
        sHeight = (document.documentElement.scrollHeight > document.getElementsByTagName('body')[0].scrollHeight) ? document.documentElement.scrollHeight : document.getElementsByTagName('body')[0].scrollHeight;
            
        return ({ width : dWidth, height : dHeight, scrollWidth : sWidth, scrollHeight : sHeight, scrollLeft : sLeft, scrollTop : sTop });
    },
    
    exists : function() {
        if (typeof this.overlay == 'undefined') return false;
        return true;
    }
    
}

var ModalDialog = new ModalDialog_Engine();