/****************************************************************
  *                                                              *
  *  Modals                                                      *
  *  ------                                                      *
  *                                                              *
  *  This script offers you a collection of basic modal popups.  *
  *                                                              *
  *  Version 0.1 (initial version)                               *
  *  Copyright (c) 2008 Jan Stolk                                *
  *                                                              *
  *  Website: http://www.javascriptmodalpopups.com               *
  *  E-Mail: stolk_jan@hotmail.com                               *
  *                                                              *
  *                                                              *
  *  This library is free software; you can redistribute         *
  *  it and/or modify it under the terms of the GNU              *
  *  Lesser General Public License as published by the           *
  *  Free Software Foundation; either version 3 of the           *
  *  License, or (at your option) any later version.             *
  *                                                              *
  *  This library is distributed in the hope that it will        *
  *  be useful, but WITHOUT ANY WARRANTY; without even the       *
  *  implied warranty of MERCHANTABILITY or FITNESS FOR A        *
  *  PARTICULAR PURPOSE. See the GNU Lesser General Public       *
  *  License for more details.                                   *
  *                                                              *
  *  You should have received a copy of the GNU Lesser           *
  *  General Public License along with this library;             *
  *  Inc., 59 Temple Place, Suite 330, Boston,                   *
  *  MA 02111-1307 USA                                           *
  *                                                              *
  ****************************************************************/

 /****************************************************************
  *                                                              *
  *  Next release ideas:                                         *
  *                                                              *
  *  maxWidth and maxHeight                                      *
  *      to limit autosize of popup                              *
  *  isDialog                                                    *
  *      hardly possible in javascript, ie;                      *
  *      if(Modals.YesNoCancel(...) == "yes") etc...             *
  *                                                              *
  ****************************************************************/

var ModalsDefaults = {
    shadow: true,
    shadowSize: 8,
    shadowColor: "#333333",
    backgroundColor: "#CCCCCC",
    borderColor: "#999999",
    titleBackColor: "#C1D2E7",
    titleFontColor: "#15428B",
    popupBackColor: "#C7D6E9",
    popupFontColor: "black",
    footerBackColor: "#C1D2E7",
    footerFontColor: "#15428B",
    okButtonText: "OK",
    yesButtonText: "Yes",
    noButtonText: "No",
    cancelButtonText: "Cancel",
    fontFamily: "Verdana,Arial",
    fontSize: "9pt"
}

var Modals = {
    Init: function() {
        //No init required, yet
    },
    
    SetDefaults: function(parameters) {
        parameters = parameters || {};
        ModalsDefaults.shadow = parameters.shadow != null ? parameters.shadow : ModalsDefaults.shadow;
        ModalsDefaults.shadowSize = parameters.shadowSize != null ? parameters.shadowSize : ModalsDefaults.shadowSize;
        ModalsDefaults.shadowColor = parameters.shadowColor != null ? parameters.shadowColor : ModalsDefaults.shadowColor;
        ModalsDefaults.backgroundColor = parameters.backgroundColor != null ? parameters.backgroundColor : ModalsDefaults.backgroundColor;
        ModalsDefaults.borderColor = parameters.borderColor != null ? parameters.borderColor : ModalsDefaults.borderColor;
        ModalsDefaults.okButtonText = parameters.okButtonText != null ? parameters.okButtonText : ModalsDefaults.okButtonText;
        ModalsDefaults.yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalsDefaults.yesButtonText;
        ModalsDefaults.noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalsDefaults.noButtonText;
        ModalsDefaults.cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : ModalsDefaults.cancelButtonText;
        ModalsDefaults.titleBackColor = parameters.titleBackColor != null ? parameters.titleBackColor : ModalsDefaults.titleBackColor;
        ModalsDefaults.titleFontColor = parameters.titleFontColor != null ? parameters.titleFontColor : ModalsDefaults.titleFontColor;
        ModalsDefaults.popupBackColor = parameters.popupBackColor != null ? parameters.popupBackColor : ModalsDefaults.popupBackColor;
        ModalsDefaults.popupFontColor = parameters.popupFontColor != null ? parameters.popupFontColor : ModalsDefaults.popupFontColor;
        ModalsDefaults.footerBackColor = parameters.footerBackColor != null ? parameters.footerBackColor : ModalsDefaults.footerBackColor;
        ModalsDefaults.footerFontColor = parameters.footerFontColor != null ? parameters.footerFontColor : ModalsDefaults.footerFontColor;
        ModalsDefaults.fontFamily = parameters.fontFamily != null ? parameters.fontFamily : ModalsDefaults.fontFamily;
        ModalsDefaults.fontSize = parameters.fontSize != null ? parameters.fontSize : ModalsDefaults.fontSize;
    },

    Alert: function(id, title, message, parameters) {
        //Get parameters
        parameters = parameters || {};
        if(!title) title = "Alert";

        //'Alert' specific parameters
        parameters.buttons = "ok";
        parameters.okButtonText = parameters.okButtonText != null ? parameters.okButtonText : ModalsDefaults.okButtonText;

        //Create layers
        var myLayers = Modals._createAllLayers(id, title, message, parameters);
        var oPopupBody = myLayers[4];
        
        //'Alert' specific setup of Body
        oPopupBody.innerHTML = message;

        //Style all layers        
        Modals._styleAllLayers(id, parameters, myLayers);
    },

    Confirm: function(id, title, question, parameters) {
        //Get parameters
        parameters = parameters || {};
        if(!title) title = "Confirm";

        //'Confirm' specific parameters
        parameters.buttons = "yes,no";
        parameters.yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalsDefaults.yesButtonText;
        parameters.noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalsDefaults.noButtonText;

        //Create layers
        var myLayers = Modals._createAllLayers(id, title, question, parameters);
        var oPopupBody = myLayers[4];
        
        //'Confirm' specific setup of Body
        oPopupBody.innerHTML = question;
        
        //Style all layers   
        Modals._styleAllLayers(id, parameters, myLayers);
    },
    
    YesNoCancel: function(id, title, question, parameters) {
        //Get parameters
        parameters = parameters || {};
        if(!title) title = "YesNoCancel";

        //'Confirm' specific parameters
        parameters.buttons = "yes,no,cancel";
        parameters.yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalsDefaults.yesButtonText;
        parameters.noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalsDefaults.noButtonText;
        parameters.cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : ModalsDefaults.cancelButtonText;

        //Create layers
        var myLayers = Modals._createAllLayers(id, title, question, parameters);
        var oPopupBody = myLayers[4];
        
        //'Confirm' specific setup of Body
        oPopupBody.innerHTML = question;
        
        //Style all layers   
        Modals._styleAllLayers(id, parameters, myLayers);
    },
    
    Prompt: function(id, title, question, parameters) {
        //Get parameters
        parameters = parameters || {};
        if(!title) title = "Prompt";
        
        //'Prompt' specific parameters
        parameters.buttons = "ok,cancel";
        parameters.okButtonText = parameters.okButtonText != null ? parameters.okButtonText : "OK";
        parameters.cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : "Cancel";
        
        //Create layers
        var myLayers = Modals._createAllLayers(id, title, question, parameters);
        var oPopupBody = myLayers[4];
        
        var txtStyle = "";
        if(parameters.width != null)
            txtStyle = "width:95%;";

        //'Prompt' specific setup of Body
        var txtHtml = question + "<br/>";
        txtHtml += "<input type=text id='" + id + "_promptInput' value='' " + 
            "style='border: solid 1px #859DBE; "  + txtStyle + "'>";

        oPopupBody.innerHTML = txtHtml;
        
        //Style all layers   
        Modals._styleAllLayers(id, parameters, myLayers);

        //Focus input box        
        ModalsSupport.findControl(id+"_promptInput").focus();
    },
    
    GetPromptInput: function(id) {
        var promptValue = ModalsSupport.findControl(id+"_promptInput");
        return promptValue;
    },
    
    GetPromptResult: function(id) {
        var promptValue = ModalsSupport.findControl(id+"_promptInput");
        return promptValue;
    },
    
    GetCustomControl: function(id) {
        return ModalsSupport.findControl(id);
    },
    
    Indicator: function(id, title, message, parameters) {
        //Get parameters
        parameters = parameters || {};
        if(!title) title = "Indicator";

        //'Indicator' specific parameters
        if(parameters.buttons == null)
            parameters.buttons = "";

        //Create layers
        var myLayers = Modals._createAllLayers(id, title, message, parameters);
        var oPopupBody = myLayers[4];
        
        //'Indicator' specific setup of Body
        oPopupBody.innerHTML = message;

        //Style all layers        
        Modals._styleAllLayers(id, parameters, myLayers);
    },

    //Custom modal popup. parameters.buttons is a mandatory parameter
    Custom: function(id, title, contents, parameters) {
        //Get parameters
        parameters = parameters || {};
        if(!title) title = "Custom";
        
        if(parameters.buttons == null)
        {
            alert("buttons is a required parameter. ie: buttons: 'yes,no' or buttons: 'ok'.\nPossible buttons are yes, no, ok, cancel");
            return;
        }

        //Create layers
        var myLayers = Modals._createAllLayers(id, title, contents, parameters);
        var oPopupBody = myLayers[4];
        
        //'Custom' specific setup of Body
        oPopupBody.innerHTML = contents;

        //Style all layers        
        Modals._styleAllLayers(id, parameters, myLayers);
    },

    //Cancel/Close modal popup    
    Close: function(id) {
        document.body.removeChild(ModalsSupport.findControl(id+"_background"));
        document.body.removeChild(ModalsSupport.findControl(id+"_popup"));
        document.body.removeChild(ModalsSupport.findControl(id+"_shadow"));
    },

    //Cancel/Close modal popup    
    Cancel: function(id) {
        Modals.Close(id);
    },
    
     //Support variable to put each layer on top, increases everytime a modal popup is created
    _zIndex: 10000,
    
     //Support function to create all layers
    _createAllLayers: function(id, title, message, parameters) {
        //Create all 6 layers for; BackGround, Popup, Shadow, PopupTitle, PopupBody, PopupFooter
        var oBackground = ModalsSupport.makeLayer(id+'_background', true, null);        // 0
        var oPopup = ModalsSupport.makeLayer(id+'_popup', true, null);                  // 1
        var oShadow = ModalsSupport.makeLayer(id+'_shadow', true, null);                // 2
        var oPopupTitle = ModalsSupport.makeLayer(id+'_popupTitle', true, oPopup);      // 3
        var oPopupBody = ModalsSupport.makeLayer(id+'_popupBody', true, oPopup);        // 4
        var oPopupFooter = ModalsSupport.makeLayer(id+'_popupFooter', true, oPopup);    // 5
        
        //Set default values for button related parameters; OK, Yes, No, Cancel
        var okButtonText = parameters.okButtonText != null ? parameters.okButtonText : ModalsDefaults.okButtonText;
        var yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalsDefaults.yesButtonText;
        var noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalsDefaults.noButtonText;
        var cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : ModalsDefaults.cancelButtonText;
        var onOk = parameters.onOk != null ? parameters.onOk : "Modals.Close(\"" + id + "\");";
        var onYes = parameters.onYes != null ? parameters.onYes : "Modals.Close(\"" + id + "\");";
        var onNo = parameters.onNo != null ? parameters.onNo : "Modals.Close(\"" + id + "\");";
        var onCancel = parameters.onCancel != null ? parameters.onCancel : "Modals.Close(\"" + id + "\");";
        
        //Create popup 'title' layer
        oPopupTitle.innerHTML = "<table cellpadding='0' cellspacing='0' style='border: 0;' height='100%'>" +
            "<tr><td valign='middle'><b>" + title + "</b></td></tr>" + 
            "</table>" ;
        
        //Create popup 'footer' layer
        oPopupFooter.innerHTML = "";
            
        //Split buttons parameter and create buttons; OK, Yes, No, Cancel
        parameters.fontFamily = parameters.fontFamily != null ? parameters.fontFamily : ModalsDefaults.fontFamily;
        var bt = parameters.buttons.split(',');
        for(x in bt) {
            if(bt[x] == "ok")
                oPopupFooter.innerHTML += "<input name='" + id + "_okButton' id='" + id + "_okButton' type=button value='" + okButtonText + "' style='font-family:Verdana,Arial; font-size:8pt; border: solid 1px #859DBE; background-color: white; width:75px; height:20px; margin-right: 5px; margin-left: 5px;' onclick='" + onOk + "'/>";
            if(bt[x] == "yes")
                oPopupFooter.innerHTML += "<input name='" + id + "_yesButton' id='" + id + "_yesButton' type=button value='" + yesButtonText + "' style='font-family:Verdana,Arial; font-size:8pt; border: solid 1px #859DBE; background-color: white; width:75px; height:20px; margin-right: 5px; margin-left: 5px;' onclick='" + onYes + "'/>";
            if(bt[x] == "no")
                oPopupFooter.innerHTML += "<input name='" + id + "_noButton' id='" + id + "_noButton' type=button value='" + noButtonText + "' style='font-family:Verdana,Arial; font-size:8pt; border: solid 1px #859DBE; background-color: white; width:75px; height:20px; margin-right: 5px; margin-left: 5px;' onclick='" + onNo + "'/>";
            if(bt[x] == "cancel")
                oPopupFooter.innerHTML += "<input name='" + id + "_cancelButton' id='" + id + "_cancelButton' type=button value='" + cancelButtonText + "' style='font-family:Verdana,Arial; font-size:8pt; border: solid 1px #859DBE; background-color: white; width:75px; height:20px; margin-right: 5px; margin-left: 5px;' onclick='" + onCancel + "'/>";
        }
        
        //Create popup 'body' layer, is done in; Alert, Confirm, YesNoCancel, Prompt and Custom functions.
        var allLayers = new Array(oBackground, oPopup, oShadow, oPopupTitle, oPopupBody, oPopupFooter);
        
        if(parameters.autoClose != null)
            setTimeout('Modals.Close(\"'+id+'\");', parameters.autoClose);

        return allLayers;
    },
    
     //Support function to style and position all layers
    _styleAllLayers: function(id, parameters, allLayers) {
        var myLayers = allLayers;
        var oBackground = myLayers[0];
        var oPopup = myLayers[1];
        var oShadow = myLayers[2];
        var oPopupTitle = myLayers[3];
        var oPopupBody = myLayers[4];
        var oPopupFooter = myLayers[5];
        
        Modals._zIndex += 3;
        var zIndex = Modals._zIndex;

        //Get Css parameters for borderColor. 
        parameters.borderColor = parameters.borderColor != null ? parameters.borderColor : ModalsDefaults.borderColor;  // #859DBE

        //Default css for; oBackground, oPopup and oShadow layers
        //Position elements excluded (except for background); top, left, width, height. 
        //They will be calculated by contents of oPopup, or set by the parameters.
        var cssBackground = "display:inline; position:absolute; z-index: " + (zIndex) + "; left:0px; top:0px; width:100%; height:100%; filter:alpha(opacity=70); opacity:0.7;";
        var cssShadow = "display:inline; position:absolute; z-index: " + (zIndex+1) + ";"; 
        var cssPopup = "display:inline; position:absolute; z-index: " + (zIndex+2) + "; background-color:white; color:black; border:solid 1px " + parameters.borderColor + "; padding:1px;"; // background-color:#EEF1F2

        //Get Css parameters for oBackGround layer. 
        parameters.backgroundColor = parameters.backgroundColor != null ? parameters.backgroundColor : ModalsDefaults.backgroundColor;
        cssBackground += " background-color:" + parameters.backgroundColor + ";";

        //Css for oPopup content layers. (oPopupTitle, oPopupBody, oPopupFooter)
        parameters.fontFamily = parameters.fontFamily != null ? parameters.fontFamily : ModalsDefaults.fontFamily;
        parameters.fontSize = parameters.fontSize != null ? parameters.fontSize : ModalsDefaults.fontSize;
        var cssPopupTitle = "position: absolute; font-family:" + parameters.fontFamily + "; font-size:" + parameters.fontSize + "; padding: 5px; text-align:left;";
        var cssPopupBody = "position: absolute; font-family:" + parameters.fontFamily + "; font-size:" + parameters.fontSize + "; padding: 5px; text-align:left;";
        var cssPopupFooter = "position: absolute; font-family:" + parameters.fontFamily + "; font-size:" + parameters.fontSize + "; padding: 5px; text-align:center;";

        //First style the contents of the oPopup layer. (oPopupTitle, oPopupBody, oPopupFooter)
        //When this is done we can calculate the height and width of the oPopup contents.
        if(ModalsSupport.isIE) {
            oPopupTitle.style.cssText = cssPopupTitle;
            oPopupBody.style.cssText = cssPopupBody; 
            oPopupFooter.style.cssText = cssPopupFooter; 
        }
        else { 
            oPopupTitle.setAttribute("style", cssPopupTitle);
            oPopupBody.setAttribute("style", cssPopupBody);
            oPopupFooter.setAttribute("style", cssPopupFooter);
        } 

        //Get css color related parameters for; oPopup, oPopupTitle, oPopupBody, oPopupFooter.
        parameters.titleBackColor = parameters.titleBackColor != null ? parameters.titleBackColor : ModalsDefaults.titleBackColor;
        parameters.titleFontColor = parameters.titleFontColor != null ? parameters.titleFontColor : ModalsDefaults.titleFontColor;
        parameters.popupBackColor = parameters.popupBackColor != null ? parameters.popupBackColor : ModalsDefaults.popupBackColor;
        parameters.popupFontColor = parameters.popupFontColor != null ? parameters.popupFontColor : ModalsDefaults.popupFontColor;
        parameters.footerBackColor = parameters.footerBackColor != null ? parameters.footerBackColor : ModalsDefaults.footerBackColor;
        parameters.footerFontColor = parameters.footerFontColor != null ? parameters.footerFontColor : ModalsDefaults.footerFontColor;
        cssPopupTitle += " background-color:" + parameters.titleBackColor + ";";
        cssPopupTitle += " color:" + parameters.titleFontColor + ";";
        cssPopupBody += " background-color:" + parameters.popupBackColor + ";";
        cssPopupBody += " color:" + parameters.popupFontColor + ";";
        cssPopupFooter += " background-color:" + parameters.footerBackColor + ";";
        cssPopupFooter += " color:" + parameters.footerFontColor + ";";

        //Calculate maxWidth of the 3 layers in oPopup. (oPopupTitle,oPopupBody,oPopupFooter)
        var calcMaxWidth = 0;
        if(ModalsSupport.getLayerWidth(oPopupTitle.id) > calcMaxWidth) 
            calcMaxWidth = ModalsSupport.getLayerWidth(oPopupTitle.id);
        if(ModalsSupport.getLayerWidth(oPopupBody.id) > calcMaxWidth)
            calcMaxWidth = ModalsSupport.getLayerWidth(oPopupBody.id);  
        if(ModalsSupport.getLayerWidth(oPopupFooter.id) > calcMaxWidth)
            calcMaxWidth = ModalsSupport.getLayerWidth(oPopupFooter.id);   
                        
        //Calculate total height of the 3 layers in oPopup. (oPopupTitle+oPopupBody+oPopupFooter)
        var calcTotalHeight = ModalsSupport.getLayerHeight(oPopupTitle.id) + ModalsSupport.getLayerHeight(oPopupBody.id) + ModalsSupport.getLayerHeight(oPopupFooter.id);    
        
        
        parameters.width = parameters.width != null ? parameters.width : (calcMaxWidth + 4); // Add 4px for; padding: 1px and border: 1px;
        parameters.height = parameters.height != null ? parameters.height : calcTotalHeight; // Set height as height of; oPopupTitle + oPopupBody + oPopupFooter
        
        //Eerst hoogte oPopupBody aanpassen indien parameters.height is meegegeven
        var newBodyHeight = ModalsSupport.getLayerHeight(oPopupBody.id)
        if(parameters.height > calcTotalHeight) {
            // Sub 10px for; padding: 5px;
            newBodyHeight = parameters.height - ModalsSupport.getLayerHeight(oPopupTitle.id) - ModalsSupport.getLayerHeight(oPopupFooter.id);
            cssPopupBody += " height:" + newBodyHeight + "px;";
            calcTotalHeight = ModalsSupport.getLayerHeight(oPopupTitle.id) + newBodyHeight + ModalsSupport.getLayerHeight(oPopupFooter.id);  
        }
        
        cssPopupTitle += " top:1px;";
        cssPopupBody += " top:" + ModalsSupport.getLayerHeight(oPopupTitle.id) + "px;";
        cssPopupFooter += " top:" + (ModalsSupport.getLayerHeight(oPopupTitle.id) + (newBodyHeight) /*ModalsSupport.getLayerHeight(oPopupBody.id)*/) + "px;";
        cssPopupTitle += " width:" + (parameters.width - 10) + "px;"; // Sub 10px for; padding-left+right: 5px;
        cssPopupBody += " width:" + (parameters.width - 10) + "px;"; // Sub 10px for-left+right; padding: 5px;
        cssPopupFooter += " width:" + (parameters.width - 10) + "px;"; // Sub 10px for-left+right; padding: 5px;
        
         //Get browser width and height
        var frameWidth = ModalsSupport.getFrameWidth();
        var frameHeight = ModalsSupport.getFrameHeight();
        
        if(parameters.height < calcTotalHeight)
            parameters.height = calcTotalHeight;
        
        //Get parameters for oPopup layer.
        parameters.top = parameters.top != null ? parameters.top : ((frameHeight/2) - (parameters.height/2));
        parameters.left = parameters.left != null ? parameters.left : ((frameWidth/2) - (parameters.width/2));

        //Set modal popup position
        cssPopup += " top:" + parameters.top + "px;";
        cssPopup += " left:" + parameters.left + "px;";
        
        cssPopupTitle += " left:1px;";
        cssPopupBody += " left:1px;";
        cssPopupFooter += " left:1px;";
        
        if(parameters.width) 
            cssPopup += " width:" + parameters.width + "px;";
        else
            cssPopup += " width:" + parameters.maxWidth + "px;";
            
        if(parameters.height) 
            cssPopup += " height:" + (parameters.height-1) + "px;";
        else
            cssPopup += " height:" + (calcTotalHeight-1) + "px;";
        
        //First style the contents of the oPopup layer. (oPopupTitle, oPopupBody, oPopupFooter)
        //When this is done we can calculate the height and width of the oPopup contents.
        if(ModalsSupport.isIE) {
            oPopupTitle.style.cssText = cssPopupTitle;
            oPopupBody.style.cssText = cssPopupBody; 
            oPopupFooter.style.cssText = cssPopupFooter; 
        }
        else { 
            oPopupTitle.setAttribute("style", cssPopupTitle);
            oPopupBody.setAttribute("style", cssPopupBody);
            oPopupFooter.setAttribute("style", cssPopupFooter);
        }   

        //Setup shadow layer
        parameters.shadow = parameters.shadow != null ? parameters.shadow : ModalsDefaults.shadow;
        if(parameters.shadow) {
            //Get parameters for oShadow layer.
            parameters.shadowSize = parameters.shadowSize != null ? parameters.shadowSize : ModalsDefaults.shadowSize;
            parameters.shadowColor = parameters.shadowColor != null ? parameters.shadowColor : ModalsDefaults.shadowColor;
            cssShadow += "background-color:" + parameters.shadowColor + ";"; 
        
            cssShadow += " top:" + (parameters.top + parameters.shadowSize) + "px;";
            cssShadow += " left:" + (parameters.left + parameters.shadowSize) + "px;";
            if(parameters.width) 
                cssShadow += " width:" + parameters.width + "px;";
            else
                cssShadow += " width:" + maxWidth + "px;";
            if(parameters.height) 
                cssShadow += " height:" + (parameters.height-1) + "px;";
            else
                cssShadow += " height:" + (calcTotalHeight) + "px;";
        }
        else {
            cssShadow += " display:none;";
        }
        
        //Secondly style the contents of the main layers. (oBackGround, oPopup, oShadow)
        if(ModalsSupport.isIE) {
            oPopup.style.cssText = cssPopup; 
            oShadow.style.cssText = cssShadow; 
            oBackground.style.cssText = cssBackground; 
        }
        else {
            oPopup.setAttribute("style", cssPopup);
            oShadow.setAttribute("style", cssShadow);
            oBackground.setAttribute("style", cssBackground);
        }
        
        //Load file?
        parameters.loadTextFile = parameters.loadTextFile != null ? parameters.loadTextFile : "";
        if(parameters.loadTextFile != "")
            Modals._loadTextFile(id, parameters, allLayers, parameters.loadTextFile);
     },
     
     //Support function to load text file via AJAX call
     _loadTextFile: function(id, parameters, allLayers, filename)
     {
        var objXml = ModalsSupport.getXmlHttp(); 
        objXml.open("GET", filename, true);
        objXml.onreadystatechange=function() 
        {
            if (objXml.readyState==4) 
            {
                var txt = objXml.responseText.replace("\r\n","<br>").replace("\n\r","<br>").replace("\n","<br>").replace("\r","<br>");
                var html = "<div style='overflow-y: scroll; position:absolute; " + 
                    "top:5px; left:5px; height:" + (parameters.height - 65) + "px; " + 
                    "width:" + (parameters.width - 10) + "px;'>";
                html += txt;
                html += "</div>";
                Modals.GetCustomControl(id+"_popupBody").innerHTML = html;
                parameters.loadTextFile = "";
                Modals._styleAllLayers(id, parameters, allLayers);
            }
        }
        objXml.send(null);
    }
};

var ModalsSupport = {
    isIE: function() {
        return (window.ActiveXObject) ? true : false;
    },
    
    getDialog: function() {
    
    },
    
    makeLayer : function(id,layerVisible,layerParent) {
        var container = document.createElement("div");
        container.id = id;
        
        if(layerParent)
            layerParent.appendChild(container);
        else
            document.body.appendChild(container);
        
        return container;
    },
    
    deleteLayer: function(id) {
        var del = findLayer(id);
        if(del) 
            document.body.removeChild(del);
    },
    
    findLayer: function(id) {
        return document.all ? document.all[id] : document.getElementById(id);
    },
        
    findControl: function(id, parent) {
        if(parent == null)
        {  
            return document.all ? document.all[id] : document.getElementById(id);
        }
        else
        {
            return document.all ? document.all[id] : document.getElementById(id);
        }
    },
    
    getLayerHeight: function(id) {
        if (document.all) {
            gh = document.getElementById(id).offsetHeight;  
        }
        else {
            gh = document.getElementById(id).offsetHeight;  //-5;
        }
        return gh;
    },
    
    getLayerWidth: function(id) {
        gw = document.getElementById(id).offsetWidth;
        return gw;
    },
    
    readFile: function(filename, intoElement) {
        var xmlHttp = getXmlHttp();
        var file = filename+"?r="+Math.random();
        xmlHttp.open("GET", file, true);
        xmlHttp.onreadystatechange=function() 
        {
            if (xmlHttp.readyState==4) 
            {
                intoElement.innerHTML = xmlHttp.responseText;
            }
        }
        xmlHttp.send(null);
    },
        
    getFrameWidth: function() {
        var frameWidth = document.documentElement.clientWidth;
        if (self.innerWidth) // Als de browser deze manier van aanroepen hanteerd
        {
            frameWidth = self.innerWidth; // Haal de frame-width op
        }
        else if (document.documentElement && document.documentElement.clientWidth)  // Als de browser deze manier van aanroepen hanteerd
        {
            frameWidth = document.documentElement.clientWidth; // Haal de frame-width op
        }
        else if (document.body)  // Als de browser deze manier van aanroepen hanteerd
        {
            frameWidth = document.body.clientWidth; // Haal de frame-width op
        }
        else return;
        return frameWidth;
    },
    
    getFrameHeight: function() {
        var frameHeight = document.documentElement.clientHeight;
        if (self.innerWidth) // Als de browser deze manier van aanroepen hanteerd
        {
            frameHeight = self.innerHeight; // Haal de frame-height op
        }
        else if (document.documentElement && document.documentElement.clientWidth)  // Als de browser deze manier van aanroepen hanteerd
        {
            frameHeight = document.documentElement.clientHeight; // Haal de frame-height op
        }
        else if (document.body)  // Als de browser deze manier van aanroepen hanteerd
        {
            frameHeight = document.body.clientHeight; // Haal de frame-height op
        }
        else return;
        return frameHeight;
    },
    
    getXmlHttp: function()
    {
        var xmlHttp;
        try
        {  // Firefox, Opera 8.0+, Safari  
            xmlHttp=new XMLHttpRequest();  
        }
        catch (e)
        {  // Internet Explorer  
            try
            {    
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");    
            }
            catch (e)
            {    
                try
                {      
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      
                }
                catch (e)
                {      
                    alert("Your browser does not support AJAX!");      
                    return false;      
                }    
            }  
        }  
        return xmlHttp;
    }
    
    

};