//
//  dxPopup 0.2.1
//        "an alternative to the javascript popup function"
//
//  The MIT License
//
//  Copyright (c) 2007 Joseph Piche [josephpiche@vehris.com]
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
//


// This function is really an object containing all the necessary
// functions and variables for dxPopup.
function dxPopup(gblUrl,gblTitle,gblId,Options) {

    // declare global variables
    gblWidth=null;
    gblHeight=null;
    gblLeft=null;
    gblTop=null;
    gblOpacity="none";
    gblTitleBarColor="#FFB400";
    gblTitleTextColor="#000000";
    gblEnableMouseDrag="yes";
    gblEnableResize="no";
    gblEnableContext="no";
   

    // parse `Options`
    if (Options) {
        OptsAr = Options.split(/[;,]/);
        for (i=0;i<OptsAr.length;i++) {
            array = OptsAr[i].split(/=/);
            switch (array[0]) {
                // each case is a posible value in the `Options` array set by the user
                case "width"            : gblWidth=array[1];break;          // pixels
                case "height"           : gblHeight=array[1];break;         // pixels
                case "top"              : gblTop=array[1];break;            // pixels
                case "left"             : gblLeft=array[1];break;           // pixels
                case "opacity"          : gblOpacity=array[1];break;        // percentage
                case "title-bar-color"  : gblTitleBarColor=array[1];break;  // hex with `#` or color name
                case "title-text-color" : gblTitleTextColor=array[1];break; // hex with `#` or color name
                case "resize"           : gblEnableResize=array[1];break;   // `yes` or `no`
                case "right-click-menu" : gblEnableContext=array[1];break;  // `yes` or `no`
                case "mouse-drag"       : gblEnableMouseDrag=array[1];break;// `yes` or `no`
            }
        }
    }

    // set default values for global variables
    if (gblWidth==null) gblWidth=300;
    if (gblWidth<100) gblWidth=100;
    if (gblHeight==null) gblHeight=200;
    if (document.addEventListener && gblHeight<180) gblHeight=180;
    if (gblTop==null) gblTop="center";
    if (gblLeft==null) gblLeft="center";
    if (gblOpacity==null || gblOpacity==100) gblOpacity="none";
    if (gblOpacity<10) gblOpacity=10;
    if (gblTitleBarColor==null) gblTitleBarColor="#666";
    if (gblTitleTextColor==null) gblTitleTextColor="#fff";
    if (gblEnableResize==null) gblEnableResize="no";
    if (gblEnableContext==null) gblEnableContext="yes";
    if (gblEnableMouseDrag==null) gblEnableMouseDrag="yes";

    // find the center of the page if applicable
    if (gblLeft == "center") {gblLeft = (document.body.clientWidth / 2) - (gblWidth/2)};
    if (gblTop == "center") {gblTop = (document.body.clientHeight / 2) - (gblHeight/2)};

    
    // main if statement containing the object detection
    if (document.getElementById && document.createElement && document.body &&
      document.appendChild && document.removeChild) {

        // This builds the dxPopup window, sets the styling, and adds it to the page.
        if (!document.getElementById(gblId)) {
        
            // create the table elements
            this.dxpop=document.createElement("div");
            this.dxTable=document.createElement("table");
            this.dxTbody=document.createElement("tbody");
            this.dxHeadTr=document.createElement("tr");
            this.dxTitle=document.createElement("td");
            this.dxTitleText=document.createTextNode(gblTitle);
            this.dxCloseTd=document.createElement("td");
            this.dxClose=document.createElement("table");
            this.dxCloseInnerTbody=document.createElement("tbody");
            this.dxCloseInnerTr=document.createElement("tr");
            this.dxCloseInnerTd=document.createElement("td");
            this.dxCloseText=document.createTextNode("X");
            this.dxFrameDiv=document.createElement("div");
            this.dxFrameTr=document.createElement("tr");
            this.dxFrameTd=document.createElement("td");
            this.dxFrame=document.createElement("iframe");

            // append the table elements to the page
            this.dxFrameDiv.appendChild(this.dxFrame);
            this.dxFrameTd.appendChild(this.dxFrameDiv);
            this.dxFrameTr.appendChild(this.dxFrameTd);
            this.dxTitle.appendChild(this.dxTitleText);
            this.dxHeadTr.appendChild(this.dxTitle);
            this.dxCloseInnerTd.appendChild(this.dxCloseText);
            this.dxCloseInnerTr.appendChild(this.dxCloseInnerTd);
            this.dxCloseInnerTbody.appendChild(this.dxCloseInnerTr);
            this.dxClose.appendChild(this.dxCloseInnerTbody);
            this.dxCloseTd.appendChild(this.dxClose);
            this.dxHeadTr.appendChild(this.dxCloseTd);
            this.dxTbody.appendChild(this.dxHeadTr);
            this.dxTbody.appendChild(this.dxFrameTr);
            this.dxTable.appendChild(this.dxTbody);
            this.dxpop.appendChild(this.dxTable);

            // This is to detect if the "addEventListener" method is available, and
            // therefore if the browser is IE or not


            // Begin resize functions
            if (gblEnableResize=="yes") {

                this.dxpop.onmouseover = function(event) {
                    var xOff, yOff;

                    // Find resize direction
                    if (window.event) { // IE
                        xOff = window.event.offsetX;
                        yOff = window.event.offsetY;
                    } else { // Firefox
                        xOff = event.layerX;
                        yOff = event.layerY;
                    }

                    this.resizeDirection = ""
                    if (yOff <= 10) this.resizeDirection += "n";
                    else if (yOff >= this.offsetHeight - 10) this.resizeDirection += "s";
                    if (xOff <= 10) this.resizeDirection += "w";
                    else if (xOff >= this.offsetWidth - 10) this.resizeDirection += "e";

                    // If not on window edge, restore cursor and exit.

                    if (this.resizeDirection == "") {
                        this.onmouseout(event);
                        return;
                    }

                    // Change cursor.
                    document.body.style.cursor = this.resizeDirection + "-resize";

                }

                this.dxpop.onmouseout = function(event) {document.body.style.cursor = "";}

                this.dxpop.onmousedown = function(event) {
                   var th = this;

                    if (window.event) { // IE
                        th.xPosition = window.event.x;
                        th.yPosition = window.event.y;
                        window.event.cancelBubble = true;
                        window.event.returnValue = false;
                    } else { // Firefox
                        th.xPosition = event.pageX;
                        th.yPosition = event.pageY;
                        event.preventDefault();
                    }

                    th.oldLeft   = parseInt(th.style.left);
                    th.oldTop    = parseInt(th.style.top);
                    th.oldWidth  = parseInt(th.style.width);
                    th.oldHeight = parseInt(th.style.height);

                    document.onmousemove = function(event) {

                        var north, south, east, west;
                        var dx, dy;
                        var w, h;

                        north=south=east=west=false;

                        if (th.resizeDirection.charAt(0) == "n") north = true;
                        if (th.resizeDirection.charAt(0) == "s") south = true;
                        if (th.resizeDirection.charAt(0) == "e" || th.resizeDirection.charAt(1) == "e") east = true;
                        if (th.resizeDirection.charAt(0) == "w" || th.resizeDirection.charAt(1) == "w") west = true;

                        if (window.event) { // IE
                            dx = window.event.x - th.xPosition;
                            dy = window.event.y - th.yPosition;
                        } else { // Firefox
                            dx = event.pageX - th.xPosition;
                            dy = event.pageY - th.yPosition;
                        }

                        if (west) dx = -dx;
                        if (north) dy = -dy;

                        w = th.oldWidth  + dx;
                        h = th.oldHeight + dy;

                        if (w <= 100) {
                            w = 100;
                            dx = w - th.oldWidth;
                        }
                        if (h <= 180) {
                            h = 180;
                            dy = h - th.oldHeight;
                        }

                        if (east || west) {
                            th.style.width = w;
                        }
                        if (north || south)
                            th.style.height = h;

                        if (west) th.style.left = (th.oldLeft - dx);
                        if (north) th.style.top  = (th.oldTop  - dy);

                    }

                    // stops listening to everything
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };

                    if (window.event) { // IE
                        window.event.cancelBubble = true;
                        window.event.returnValue = false;
                    } else {
                        event.preventDefault();
                    }
                }
            }
            // End resize functions
            
            
            // Begin close button functions
            // these enable mouseover effects to make it appear more real
            this.dxClose.onmousedown = function() {
                document.body.removeChild(document.getElementById(gblId));
                if (document.getElementById(gblId+"_contextMenu"))
                    document.body.removeChild(document.getElementById(gblId+"_contextMenu"));
            }
            this.dxClose.onmouseover = function() {this.style.backgroundColor = "#d00";}
            this.dxClose.onmouseout = function() {this.style.backgroundColor = "#f00";}
            // End close buttton functions
            
            
            // Begin mousedrag functions
            if (gblEnableMouseDrag=="yes") {
                this.dxHeadTr.onmousedown = function(event) {

                    // get the click coordinates
                    if (window.event) { // IE
                        x = window.event.x;
                        y = window.event.y;
                    } else { // Firefox
                        x = event.pageX;
                        y = event.pageY;
                    }
                    document.getElementById(gblId).xDif = document.getElementById(gblId).offsetLeft - x;
                    document.getElementById(gblId).yDif = document.getElementById(gblId).offsetTop - y;

                    // subfunction for actually moving the object
                    document.onmousemove = function(event) {
                        if (window.event) { // IE
                            x = window.event.x;
                            y = window.event.y;
                        } else { // Firefox
                            x = event.pageX;
                            y = event.pageY;
                        }
                        document.getElementById(gblId).style.left = (x + document.getElementById(gblId).xDif) + "px";
                        document.getElementById(gblId).style.top  = (y + document.getElementById(gblId).yDif) + "px";
                    };

                    // stops listening
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }
            }            
            // End mousedrag functions
            
            
            // Begin context menu
            if (gblEnableContext=="yes") {
                this.dxTitle.oncontextmenu = function(event) {

                    // get the click coordinates
                    if (window.event) { // IE
                        x = window.event.x;
                        y = window.event.y;
                    } else { // Firefox
                        x = event.clientX;
                        y = event.clientY;
                    }

                    if (document.getElementById(gblId+"_contextMenu")) {
                        document.getElementById(gblId+"_contextMenu").style.top = y;
                        document.getElementById(gblId+"_contextMenu").style.left = x;
                        document.getElementById(gblId+"_contextMenu").style.visibility = "visible";
                    } else {
    
                        // create the menu
                        dxMenu=document.createElement("div");
                        dxMenuItem_01=document.createElement("div");
                        dxMenuItem_01Text=document.createTextNode("Opacity");
                        dxMenuItem_02=document.createElement("div");
                        dxMenuItem_02Text=document.createTextNode("100%");
                        dxMenuItem_03=document.createElement("div");
                        dxMenuItem_03Text=document.createTextNode("90%");
                        dxMenuItem_04=document.createElement("div");
                        dxMenuItem_04Text=document.createTextNode("80%");
                        dxMenuItem_05=document.createElement("div");
                        dxMenuItem_05Text=document.createTextNode("70%");
                        dxMenuItem_06=document.createElement("div");
                        dxMenuItem_06Text=document.createTextNode("60%");
                        dxMenuItem_07=document.createElement("div");
                        dxMenuItem_07Text=document.createTextNode("50%");
                        dxMenuItem_08=document.createElement("div");
                        dxMenuItem_08Text=document.createTextNode("40%");
                        dxMenuItem_09=document.createElement("div");
                        dxMenuItem_09Text=document.createTextNode("30%");
                        dxMenuItem_10=document.createElement("div");
                        dxMenuItem_10Text=document.createTextNode("Close");
    
                        // set styling
                        dxMenu.id = gblId+"_contextMenu";
                        dxMenu.style.position = "absolute";
                        dxMenu.style.top = y;
                        dxMenu.style.left = x;
                        dxMenu.style.width = "70px";
                        dxMenu.style.borderWidth = "1px";
                        dxMenu.style.borderStyle = "solid";
                        dxMenu.style.borderColor = "#ddd #666 #444 #bbb";
                        dxMenu.style.backgroundColor = "#fff";
                        dxMenu.style.padding = "4px";
                        dxMenu.style.fontSize = "12px";
                        dxMenu.style.fontFamily = "arial,sans";
                        dxMenu.style.cursor = "default";
                        dxMenu.style.color = "#000";
                        dxMenuItem_02.style.marginLeft = "5px";
                        dxMenuItem_02.style.marginRight = "5px";
                        dxMenuItem_02.style.marginTop = "2px";
                        dxMenuItem_02.style.marginBottom = "2px";
                        dxMenuItem_02.style.padding = "1px";
                        dxMenuItem_02.style.paddingLeft = "4px";
                        dxMenuItem_02.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_02.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_03.style.marginLeft = "5px";
                        dxMenuItem_03.style.marginRight = "5px";
                        dxMenuItem_03.style.marginTop = "2px";
                        dxMenuItem_03.style.marginBottom = "2px";
                        dxMenuItem_03.style.padding = "1px";
                        dxMenuItem_03.style.paddingLeft = "4px";
                        dxMenuItem_03.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_03.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_04.style.marginLeft = "5px";
                        dxMenuItem_04.style.marginRight = "5px";
                        dxMenuItem_04.style.marginTop = "2px";
                        dxMenuItem_04.style.marginBottom = "2px";
                        dxMenuItem_04.style.padding = "1px";
                        dxMenuItem_04.style.paddingLeft = "4px";
                        dxMenuItem_04.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_04.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_05.style.marginLeft = "5px";
                        dxMenuItem_05.style.marginRight = "5px";
                        dxMenuItem_05.style.marginTop = "2px";
                        dxMenuItem_05.style.marginBottom = "2px";
                        dxMenuItem_05.style.padding = "1px";
                        dxMenuItem_05.style.paddingLeft = "4px";
                        dxMenuItem_05.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_05.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_06.style.marginLeft = "5px";
                        dxMenuItem_06.style.marginRight = "5px";
                        dxMenuItem_06.style.marginTop = "2px";
                        dxMenuItem_06.style.marginBottom = "2px";
                        dxMenuItem_06.style.padding = "1px";
                        dxMenuItem_06.style.paddingLeft = "4px";
                        dxMenuItem_06.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_06.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_07.style.marginLeft = "5px";
                        dxMenuItem_07.style.marginRight = "5px";
                        dxMenuItem_07.style.marginTop = "2px";
                        dxMenuItem_07.style.marginBottom = "2px";
                        dxMenuItem_07.style.padding = "1px";
                        dxMenuItem_07.style.paddingLeft = "4px";
                        dxMenuItem_07.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_07.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_08.style.marginLeft = "5px";
                        dxMenuItem_08.style.marginRight = "5px";
                        dxMenuItem_08.style.marginTop = "2px";
                        dxMenuItem_08.style.marginBottom = "2px";
                        dxMenuItem_08.style.padding = "1px";
                        dxMenuItem_08.style.paddingLeft = "4px";
                        dxMenuItem_08.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_08.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_09.style.marginLeft = "5px";
                        dxMenuItem_09.style.marginRight = "5px";
                        dxMenuItem_09.style.marginTop = "2px";
                        dxMenuItem_09.style.marginBottom = "2px";
                        dxMenuItem_09.style.padding = "1px";
                        dxMenuItem_09.style.paddingLeft = "4px";
                        dxMenuItem_09.style.borderLeft = "1px solid #ddd";
                        dxMenuItem_09.style.borderBottom = "1px solid #ddd";
                        dxMenuItem_10.style.marginLeft = "5px";
                        dxMenuItem_10.style.marginRight = "5px";
                        dxMenuItem_10.style.marginTop = "7px";
                        dxMenuItem_10.style.marginBottom = "2px";
                        dxMenuItem_10.style.padding = "1px";
                        
                        dxMenuItem_02.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = 1;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";}
                        
                        dxMenuItem_03.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .9;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=90)";}
                        
                        dxMenuItem_04.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .8;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";}
                        
                        dxMenuItem_05.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .7;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";}
                        
                        dxMenuItem_06.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .6;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";}
                        
                        dxMenuItem_07.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .5;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";}
                        
                        dxMenuItem_08.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .4;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";}
                        
                        dxMenuItem_09.onmousedown = function() {
                            document.getElementById(gblId).style.MozOpacity = .3;
                            document.getElementById(gblId).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";}
                        
                        dxMenuItem_02.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_02.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}
                        
                        dxMenuItem_03.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_03.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}

                        dxMenuItem_04.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_04.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}
                        
                        dxMenuItem_05.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_05.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}                    
                        
                        dxMenuItem_06.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_06.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}
                        
                        dxMenuItem_07.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_07.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}                    
                        
                        dxMenuItem_08.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_08.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}
                        
                        dxMenuItem_09.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_09.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}                    
                        
                        dxMenuItem_10.onmouseover = function() {
                            this.style.backgroundColor = gblTitleBarColor;
                            this.style.color = gblTitleTextColor;}
                        dxMenuItem_10.onmouseout = function() {
                            this.style.backgroundColor = "#fff";
                            this.style.color = "#000";}
                        dxMenuItem_10.onmousedown = function() {document.body.removeChild(document.getElementById(gblId));}
                        
                        
                        // add the menu to the document
                        dxMenuItem_01.appendChild(dxMenuItem_01Text);
                        dxMenu.appendChild(dxMenuItem_01);
                        dxMenuItem_02.appendChild(dxMenuItem_02Text);
                        dxMenu.appendChild(dxMenuItem_02);
                        dxMenuItem_03.appendChild(dxMenuItem_03Text);
                        dxMenu.appendChild(dxMenuItem_03);
                        dxMenuItem_04.appendChild(dxMenuItem_04Text);
                        dxMenu.appendChild(dxMenuItem_04);
                        dxMenuItem_05.appendChild(dxMenuItem_05Text);
                        dxMenu.appendChild(dxMenuItem_05);
                        dxMenuItem_06.appendChild(dxMenuItem_06Text);
                        dxMenu.appendChild(dxMenuItem_06);
                        dxMenuItem_07.appendChild(dxMenuItem_07Text);
                        dxMenu.appendChild(dxMenuItem_07);
                        dxMenuItem_08.appendChild(dxMenuItem_08Text);
                        dxMenu.appendChild(dxMenuItem_08);
                        dxMenuItem_09.appendChild(dxMenuItem_09Text);
                        dxMenu.appendChild(dxMenuItem_09);
                        dxMenuItem_10.appendChild(dxMenuItem_10Text);
                        dxMenu.appendChild(dxMenuItem_10);
                        document.body.appendChild(dxMenu);
                    
                        document.onmousedown = function() {
                            dxMenu.style.visibility = "hidden";
                            document.getElementById(gblId).click();
                        }
                    }
                    return false;
                }
            }
            // End context menu
            

            // Begin opacity
            if (gblOpacity != null && gblOpacity <= 100) {
                this.dxpop.style.MozOpacity = (gblOpacity/100);
                this.dxpop.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+gblOpacity+")";
            }
            // End opacity
            
            
            // Begin styling
            this.dxpop.id = gblId;
            this.dxpop.style.borderWidth = "2px";
            this.dxpop.style.borderStyle = "solid";
            this.dxpop.style.borderColor = "#ddd #666 #444 #bbb";
            this.dxpop.style.margin = "0";
            this.dxpop.style.padding = "2px";
            this.dxpop.style.position = "absolute";
            this.dxpop.style.textAlign = "left";
            this.dxpop.style.left = gblLeft;
            this.dxpop.style.top = gblTop;
            this.dxpop.style.width = gblWidth;
            this.dxpop.style.height = gblHeight;
            this.dxpop.style.backgroundColor = "#aaa";
            this.dxTable.style.width = "100%";
            this.dxTable.style.height = "100%";
            this.dxTable.cellSpacing = "0";
            this.dxTable.cellPadding = "0";
            this.dxHeadTr.style.backgroundColor = gblTitleBarColor;
            this.dxTitle.height = "20px";
            this.dxTitle.style.width = "100%";
            this.dxTitle.style.borderBottom = "2px solid #aaa";
            this.dxTitle.style.textAlign = "left";
            this.dxTitle.style.paddingLeft = "3px";
            this.dxTitle.style.whiteSpace = "nowrap";
            this.dxTitle.style.verticalAlign = "middle";
            this.dxTitle.style.color = gblTitleTextColor;
            this.dxTitle.style.fontFamily = "arial,sans";
            this.dxTitle.style.fontSize = "12px";
            this.dxTitle.style.overflow = "hidden";
            this.dxTitle.style.textAlign = "left";
            this.dxTitle.style.cursor = "default";
            this.dxCloseTd.style.paddingRight = "2px";
            this.dxCloseTd.align = "right";
            this.dxCloseTd.width = "14px";
            this.dxCloseTd.vAlign = "middle";
            this.dxCloseTd.style.borderBottom = "2px solid #aaa";
            this.dxClose.style.cursor = "pointer";
            this.dxClose.style.border = "1px solid #ccc";
            this.dxClose.style.textAlign = "center";
            this.dxClose.style.color = "#fff";
            this.dxClose.style.fontWeight = "bold";
            this.dxClose.style.backgroundColor = "#f00";
            this.dxClose.style.overflow = "hidden";
            this.dxClose.cellSpacing = "0";
            this.dxClose.cellPadding = "0";
            this.dxClose.width = "13px";
            this.dxClose.height = "11px";
            this.dxCloseInnerTd.style.fontSize = "10px";
            this.dxCloseInnerTd.vAlign = "middle";
            this.dxCloseInnerTd.align = "center";
            this.dxCloseInnerTd.style.padding = "0px";
            this.dxFrameTd.style.backgroundColor = "#fff";
            this.dxFrameTd.colSpan = "2";
            this.dxFrameTd.style.height = "100%";
            this.dxFrameTd.style.width = "100%";
            this.dxFrameTd.style.borderWidth = "2px";
            this.dxFrameTd.style.borderStyle = "solid";
            this.dxFrameTd.style.borderColor = "#444 #bbb #ddd #666";
            this.dxFrameTd.align = "left";
            this.dxFrameTd.vAlign = "top";
            this.dxFrameDiv.style.width = "100%";
            this.dxFrameDiv.style.height = "100%";
            this.dxFrame.style.border = "0px";
            this.dxFrame.src = gblUrl;
            this.dxFrame.allowTransparency = "true";
            this.dxFrame.frameBorder = "0";
            this.dxFrame.style.height = "100%";
            this.dxFrame.style.width = "100%";
            // End styling
            

            // add the table to the browser window
            document.body.appendChild(this.dxpop);
        }
    } else {
        // this is for backwords compatability with older browsers
        window.open(gblUrl,gblId,"height="+gblHeight+",left="+gblLeft+",width="+gblWidth+",top="+gblTop+",menubar=no,resizeable="+gblEnableResize+",status=no,toolbar=no");
    }
}