function closeMyPopup(popupDivID) {
       document.getElementById(popupDivID+"Container").style.display="none";
  }

  function openMyPopup(popupDivID,winw,winh,titleBar) {
      var myPopup = document.getElementById(popupDivID+"Container");
      var myPopupContent = document.getElementById(popupDivID);
      try {
         myPopup.style.borderLeft = "1px solid #86A3C4";
         myPopup.style.borderRight = "3px outset #efefef";
         myPopup.style.borderTop = "1px solid #86A3C4";
         myPopup.style.borderBottom = "3px outset #efefef";
         myPopup.style.background = "#D1DEF1";
         myPopup.style.display = "none";
         myPopup.style.padding = "5px";
         myPopup.style.position = "absolute";
         myPopup.style.zIndex = "100";
      } catch(e) {}
      try {
         myPopupContent.style.border = "1px solid #86A3C4";
         myPopupContent.style.background = "#ffffff";
         myPopupContent.style.padding = "5px";
         myPopupContent.style.zIndex = "100";
      } catch(e) {}
      var obj = document.getElementById(popupDivID+"Close");
      try {
         obj.style.background = "#D1DEF1";
         obj.style.padding = "0px 0px 5px 0px";
         obj.style.textAlign = "right";
         obj.style = "filter:DropShadow(color=#ff0000, OffX=25, OffY=10)";
      } catch(e) {}
      try {
          var containerID = popupDivID+"Container";
          var topHeader = "<div style=\"display:table;width:100%;cursor:move;\" onMouseDown=\"dragStart(event, '"+containerID+"');\">";
          topHeader += "<div style=\"float:left;\" class=\"clsTitleBar\">"+titleBar+"</div>";
          topHeader += "<div style=\"float:right;cursor:pointer;\">";
          topHeader += "<img src=\"../images/btn-close.gif\" alt=\"close\" title=\"close\" onClick=\"closeMyPopup('"+popupDivID+"');\" class=\"clsCursor\">";
          topHeader += "</div>";
          topHeader += "</div>";
          topHeader += "<div class=\"clear\"></div>";
          obj.innerHTML = topHeader;
      } catch(e) {}
      try {
          myPopup.style.width = winw+"px";
         // myPopup.style.height = winh+"px";
      } catch(e) {}
      try {
          myPopup.style.left = "220px";
          myPopup.style.top = "80px";
      } catch(e) {}
      try {
          myPopupContent.style.width = winw-12+"px";
         // myPopupContent.style.height = winh-35+"px";
      } catch(e) {}
      myPopup.style.display="block";
  }
  
    function getID(id) {
        return document.getElementById(id);
    }

/*
 *  Determine browser and version.
 */

    function Browser() {

        var ua, s, i;
        this.isIE    = false;
        this.isNS    = false;
        this.version = null;

        ua = navigator.userAgent;

        s = "MSIE";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isIE = true;
            return;
        }

        s = "Netscape6/";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isNS = true;
            return;
        }

        s = "Gecko";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isNS = true;
            return;
        }
    }
    var browser = new Browser();

/*
 * Dragging Function Starts Here
 * Global variable to hold drag information.
 */

    var dragObj = new Object();

    function dragStart(event, id) {
        var x, y;
        dragObj.elNode = getID(id);

        if (browser.isIE) {
            x = window.event.clientX + document.documentElement.scrollLeft
                + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop
                + document.body.scrollTop;
        }
        if (browser.isNS) {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }

        // Save starting positions of cursor and element.

        dragObj.cursorStartX = x;
        dragObj.cursorStartY = y;
        dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
        dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

        if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
        if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

        // Capture mousemove and mouseup events on the page.

        if (browser.isIE) {
            document.attachEvent("onmousemove", dragGo);
            document.attachEvent("onmouseup",   dragStop);
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (browser.isNS) {
            document.addEventListener("mousemove", dragGo,   true);
            document.addEventListener("mouseup",   dragStop, true);
//            event.preventDefault();
        }

    }

    function dragGo(event) {

        var x, y;

        if (browser.isIE) {
            x = window.event.clientX + document.documentElement.scrollLeft
                + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop
                + document.body.scrollTop;
        }
        if (browser.isNS) {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }

       /*
        * Move drag element by the same amount the cursor has moved.
        */

       dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
       dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

       if (browser.isIE) {
           window.event.cancelBubble = true;
           window.event.returnValue = false;
       }
       if (browser.isNS)
       event.preventDefault();
   }

   function dragStop(event) {

       if (browser.isIE) {
           document.detachEvent("onmousemove", dragGo);
           document.detachEvent("onmouseup",   dragStop);
       }
       if (browser.isNS) {
           document.removeEventListener("mousemove", dragGo,   true);
           document.removeEventListener("mouseup",   dragStop, true);
       }
    }