/************************************************************************************************************
*    DHTML modal dialog box
*
*    Created:                        August, 26th, 2006
*    @class Purpose of class:        Display a modal dialog box on the screen.
*            
*    Css files used by this script:    modal-message.css
*
*    Demos of this class:            demo-modal-message-1.html
*
*     Update log:
*
************************************************************************************************************/


/**
* @constructor
*/

DHTML_modalMessage = function()
{
    var url;                                // url of modal message
    var htmlOfModalMessage;                    // html of modal message
    
    var divs_transparentDiv;                // Transparent div covering page content
    var divs_content;                        // Modal message div.
    var iframe;                                // Iframe used in ie
    var layoutCss;                            // Name of css file;
    var width;                                // Width of message box
    var height;                                // Height of message box
    
    var existingBodyOverFlowStyle;            // Existing body overflow css
    var dynContentObj;                        // Reference to dynamic content object
    var cssClassOfMessageBox;                // Alternative css class of message box - in case you want a different appearance on one of them
    var shadowDivVisible;                    // Shadow div visible ? 
    var shadowOffset;                         // X and Y offset of shadow(pixels from content box)
    var MSIE;
        
    this.url = '';                            // Default url is blank
    this.htmlOfModalMessage = '';            // Default message is blank
    this.layoutCss = 'modal-message.css';    // Default CSS file
    this.height = 0;                        // Default height of modal message
    this.width = 0;                        // Default width of modal message
    this.cssClassOfMessageBox = false;        // Default alternative css class for the message box
    this.shadowDivVisible = true;            // Shadow div is visible by default
    this.shadowOffset = 5;                    // Default shadow offset.
    this.MSIE = false;
    if(navigator.userAgent.indexOf('MSIE')>=0) this.MSIE = true;
    

}

DHTML_modalMessage.prototype = {
    // {{{ setSource(urlOfSource)
    /**
     *    Set source of the modal dialog box
     *     
     *
     * @public    
     */        
    setSource : function(urlOfSource)
    {
        this.url = urlOfSource;
        
    }    
    // }}}    
    ,
    // {{{ setHtmlContent(newHtmlContent)
    /**
     *    Setting static HTML content for the modal dialog box.
     *     
     *    @param String newHtmlContent = Static HTML content of box
     *
     * @public    
     */        
    setHtmlContent : function(newHtmlContent)
    {
        this.htmlOfModalMessage = newHtmlContent;
        
    }
    // }}}        
    ,
    // {{{ setSize(width,height)
    /**
     *    Set the size of the modal dialog box
     *     
     *    @param int width = width of box
     *    @param int height = height of box
     *
     * @public    
     */        
    setSize : function(width,height)
    {
        if(width)this.width = width;
        if(height)this.height = height;        
    }
    // }}}        
    ,        
    // {{{ setCssClassMessageBox(newCssClass)
    /**
     *    Assign the message box to a new css class.(in case you wants a different appearance on one of them)
     *     
     *    @param String newCssClass = Name of new css class (Pass false if you want to change back to default)
     *
     * @public    
     */        
    setCssClassMessageBox : function(newCssClass)
    {
        this.cssClassOfMessageBox = newCssClass;
        if(this.divs_content){
            if(this.cssClassOfMessageBox)
                this.divs_content.className=this.cssClassOfMessageBox;
            else
                this.divs_content.className='modalDialog_contentDiv';    
        }
                    
    }
    // }}}        
    ,    
    // {{{ setShadowOffset(newShadowOffset)
    /**
     *    Specify the size of shadow
     *     
     *    @param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
     *
     * @public    
     */        
    setShadowOffset : function(newShadowOffset)
    {
        this.shadowOffset = newShadowOffset
                    
    }
    // }}}        
    ,    
    // {{{ display()
    /**
     *    Display the modal dialog box
     *     
     *
     * @public    
     */        
    display : function()
    {
        if(!this.divs_transparentDiv){
            this.__createDivs();
        }    
        
        // Redisplaying divs
        this.divs_transparentDiv.style.display='block';
        this.divs_content.style.display='block';
        this.divs_shadow.style.display='block';        
        if(this.MSIE)this.iframe.style.display='block';    
        this.__resizeDivs();
        
        /* Call the __resizeDivs method twice in case the css file has changed. The first execution of this method may not catch these changes */
        window.refToThisModalBoxObj = this;        
        setTimeout('window.refToThisModalBoxObj.__resizeDivs()',150);
        
        this.__insertContent();    // Calling method which inserts content into the message div.
    }
    // }}}        
    ,
    // {{{ ()
    /**
     *    Display the modal dialog box
     *     
     *
     * @public    
     */        
    setShadowDivVisible : function(visible)
    {
        this.shadowDivVisible = visible;
    }
    // }}}    
    ,
    // {{{ close()
    /**
     *    Close the modal dialog box
     *     
     *
     * @public    
     */        
    close : function()
    {
        //document.documentElement.style.overflow = '';    // Setting the CSS overflow attribute of the <html> tag back to default.
        
        /* Hiding divs */
        this.divs_transparentDiv.style.display='none';
        this.divs_content.style.display='none';
        this.divs_shadow.style.display='none';
        if(this.MSIE)this.iframe.style.display='none';
        
    }    
    // }}}    
    ,
    // {{{ __addEvent()
    /**
     *    Add event
     *     
     *
     * @private    
     */        
    addEvent : function(whichObject,eventType,functionName,suffix)
    { 
      if(!suffix)suffix = '';
      if(whichObject.attachEvent){ 
        whichObject['e'+eventType+functionName+suffix] = functionName; 
        whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );} 
        whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] ); 
      } else 
        whichObject.addEventListener(eventType,functionName,false);         
    } 
    // }}}    
    ,
    // {{{ __createDivs()
    /**
     *    Create the divs for the modal dialog box
     *     
     *
     * @private    
     */        
    __createDivs : function()
    {
        // Creating transparent div
        this.divs_transparentDiv = document.createElement('DIV');
        this.divs_transparentDiv.className='modalDialog_transparentDivs';
        this.divs_transparentDiv.style.left = '0px';
        this.divs_transparentDiv.style.top = '0px';
        
        document.body.appendChild(this.divs_transparentDiv);
        // Creating content div
        this.divs_content = document.createElement('DIV');
        this.divs_content.className = 'modalDialog_contentDiv';
        this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv';
        this.divs_content.style.zIndex = 100000;
        
        if(this.MSIE){
            this.iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
            this.iframe.style.zIndex = -1;
            this.iframe.style.position = 'absolute';
            document.body.appendChild(this.iframe);  
        }
            
        document.body.appendChild(this.divs_content);
        // Creating shadow div
        this.divs_shadow = document.createElement('DIV');
        this.divs_shadow.className = 'modalDialog_contentDiv_shadow';
        this.divs_shadow.style.zIndex = 95000;
        document.body.appendChild(this.divs_shadow);
        window.refToModMessage = this;
        this.addEvent(window,'scroll',function(e){ window.refToModMessage.__repositionTransparentDiv() });
        this.addEvent(window,'resize',function(e){ window.refToModMessage.__repositionTransparentDiv() });
        

    }
    // }}}
    ,
    // {{{ __getBrowserSize()
    /**
     *    Get browser size
     *     
     *
     * @private    
     */        
    __getBrowserSize : function()
    {
        var bodyWidth = document.documentElement.clientWidth;
        var bodyHeight = document.documentElement.clientHeight;
        
        var bodyWidth, bodyHeight; 
        if (self.innerHeight){ // all except Explorer 
         
           bodyWidth = self.innerWidth; 
           bodyHeight = self.innerHeight; 
        }  else if (document.documentElement && document.documentElement.clientHeight) {
           // Explorer 6 Strict Mode          
           bodyWidth = document.documentElement.clientWidth; 
           bodyHeight = document.documentElement.clientHeight; 
        } else if (document.body) {// other Explorers          
           bodyWidth = document.body.clientWidth; 
           bodyHeight = document.body.clientHeight; 
        } 
        return [bodyWidth,bodyHeight];        
        
    }
    // }}}    
    ,
    // {{{ __resizeDivs()
    /**
     *    Resize the message divs
     *     
     *
     * @private    
     */    
    __resizeDivs : function()
    {
        
        var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

        if(this.cssClassOfMessageBox)
            this.divs_content.className=this.cssClassOfMessageBox;
        else
            this.divs_content.className='modalDialog_contentDiv';    
                    
        if(!this.divs_transparentDiv)return;
        
        // Preserve scroll position
        var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
        var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
        
        window.scrollTo(sl,st);
        setTimeout('window.scrollTo(' + sl + ',' + st + ');',10);

        this.__repositionTransparentDiv();
        

        var brSize = this.__getBrowserSize();
        var bodyWidth = brSize[0];
        var bodyHeight = brSize[1];
        
        // Setting width and height of content div
        this.divs_content.style.width = this.width + 'px';
        this.divs_content.style.height= this.height + 'px';      
        
        // Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
        var tmpWidth = this.divs_content.offsetWidth;    
        var tmpHeight = this.divs_content.offsetHeight;
        
        
        // Setting width and height of left transparent div
        this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + 'px';;
        this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) +  topOffset) + 'px';
        
         if(this.MSIE){
             this.iframe.style.left = this.divs_content.style.left;
             this.iframe.style.top = this.divs_content.style.top;
             this.iframe.style.width = this.divs_content.style.width;
             this.iframe.style.height = this.divs_content.style.height;
			 this.iframe.style.height = this.divs_content.style.height;
         }
         
        this.divs_shadow.style.left = (this.divs_content.style.left.replace('px','')/1 + this.shadowOffset) + 'px';
        this.divs_shadow.style.top = (this.divs_content.style.top.replace('px','')/1 + this.shadowOffset) + 'px';
        this.divs_shadow.style.height = tmpHeight + 'px';
        this.divs_shadow.style.width = tmpWidth + 'px';
        
        
        
        if(!this.shadowDivVisible)this.divs_shadow.style.display='none';    // Hiding shadow if it has been disabled
        
        
    }
    // }}}    
    ,
    // {{{ __insertContent()
    /**
     *    Insert content into the content div
     *     
     *
     * @private    
     */        
    __repositionTransparentDiv : function()
    {
        this.divs_transparentDiv.style.top = Math.max(document.body.scrollTop,document.documentElement.scrollTop) + 'px';
        this.divs_transparentDiv.style.left = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) + 'px';
        var brSize = this.__getBrowserSize();
        var bodyWidth = brSize[0];
        var bodyHeight = brSize[1];
        this.divs_transparentDiv.style.width = bodyWidth + 'px';
        this.divs_transparentDiv.style.height = bodyHeight + 'px';   
        
        var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
        var brSize = this.__getBrowserSize();
        var bodyHeight = brSize[1];     
        // Setting width and height of content div
        this.divs_content.style.height= this.height + 'px';
        // Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
        var tmpHeight = this.divs_content.offsetHeight;
        // Setting width and height of left transparent div
        this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) +  topOffset) + 'px';
               
    }
    // }}}    
    ,
    // {{{ __insertContent()
    /**
     *    Insert content into the content div
     *     
     *
     * @private    
     */    
    __insertContent : function()
    {
        if(this.url){    // url specified - load content dynamically
            ajax_loadContent('DHTMLSuite_modalBox_contentDiv',this.url);
        }else{    // no url set, put static content inside the message box
            this.divs_content.innerHTML = '<div class="messagebox"><div class="messagetop"><a href="#" onclick="closeMessage();return false" class="closemessage"></a></div><div class="messagemiddle">'+this.htmlOfModalMessage+'</div><div class="messagebottom"></div></div>';    
        }
    }        
}

messageObj = new DHTML_modalMessage();    // We only create one object of this class
messageObj.setShadowOffset(5);    // Large shadow
			
function displayMessage(url) {
			    
	messageObj.setSource(url);
	messageObj.setCssClassMessageBox(false);
	messageObj.setSize(400,200);
	messageObj.setShadowDivVisible(true);    // Enable shadow for these boxes
	messageObj.display();
	
}
			
function displayStaticMessage(messageContent, cssClass, error) {
				
	if (error) {
					
		messageContent += '<br /><br/ > <div style="margin: 0 auto; text-align:center"><a href="#" onclick="closeMessage();return false">Opnieuw</a></div>';
					
	} else {
					
		messageContent += '<br /><br/ > <div style="margin: 0 auto; text-align:center"><a href="#" onclick="closeMessage();return false">Verder</a></div>';
					
	}
				
	messageObj.setHtmlContent(messageContent);
	messageObj.setCssClassMessageBox(cssClass);
	messageObj.setSize(800,230);
	messageObj.setSource(false);    // no html source since we want to use a static message here.
	messageObj.setShadowDivVisible(false);    // Disable shadow for these boxes    
	messageObj.display();
	    
}
			
function closeMessage() {
				
	messageObj.close();
				    
}