Application Development Group

/* modalDialog.js
  ---------------
  This script creates a vertically and horizontally centered div of the specified sizedesigned to look 
  and act like a modal pop-up window.  The div will include a title bar with a close button and will 
  import the html from the specified div on the page to display as the body of the "pop-up".  The div 
  is moveable by holding the mouse button down while over the title bar and dragging the mouse, just as 
  you would expect of a pop-up window.  It cannot be moved outside the boundries of the browser though.

  The syntax for this script is:
    createPopUp(width,height,title,id) 
  where:
    width is the size of the created div (may be in % or px)
    height is the height of the created div (may be in % or px)
    title is the title of the created div
    id is the id of the div on the page to take the HTML for the pop-up from.
       (this would normally be a hidden div on your page)
  example:
    createPopUp('50%','150px','PopUp Test','divID')
-------------------------------------------------------- */

/* Add the required Style Sheet to the page
 ------------------------------------------ */
e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.href = "modalDialog.css";
e.media = "screen";
document.getElementsByTagName("head")[0].appendChild(e);

      
/* function createPop(width,height,title,id)
--------------------------------   
   Create the "PopUp" window
--------------------------------   */
function createPop(width,height,title,id) {
  // ensure the given ID exists
  obj = document.getElementById(id);
  if (obj == null ) return;
  width = width.replace(/\s/g,'')  // remove spaces from width parameter
  height = height.replace(/\s/g,'')  // remove spaces from height parameter
  // Create semi-transparent div to cover the screen
  e = document.createElement("div");
  e.id = "NSPopTransparent";
  e.style.opacity = ".5";                  
  e.style.MozOpacity = ".5";               
  e.style.KhtmlOpacity = ".5";  // older konqueror and safari
  e.style.filter = "alpha(opacity=50)";
  e.style.height = "100%";
  e.style.width = "100%";
  oContainer = document.body.appendChild(e);
  // if the document is longer than the screen height (it scrolls)
  if (document.body.offsetHeight + 24 > oContainer.offsetHeight)
    e.style.height = (document.body.offsetHeight + 24) + "px";
  disableAll(document.body,"input");
  disableAll(document.body,"select");
  disableAll(document.body,"textarea");

  // create outside div
  e = document.createElement("div");
  e.id = "NSPopUP";
  // center the outside div within the viewable section of the document
  var top = (getWindowSize()[1] / 2) - (getNumericPortion(height) );
  if (width.substr(width.length-1) == "%")
    var left = (getWindowSize()[0] / 2) + getScrollXY()[0] - (getNumericPortion(width)/100 * getWindowSize()[0] /2 );
  else 
    var left = (getWindowSize()[0] / 2) + getScrollXY()[0] - (getNumericPortion(width) / 2 );
  if (height.substr(width.length-1) == "%")
    var top = (getWindowSize()[1] / 2) + getScrollXY()[1] - (getNumericPortion(height)/100 * getWindowSize()[1] /2 );
  else
    var top = (getWindowSize()[1] / 2) + getScrollXY()[1]- (getNumericPortion(height) / 2 );
  e.style.left = left + "px";
  e.style.top = top + "px";
  e.style.height = height;
  e.style.width = width;
  oPop=document.body.appendChild(e);
  
  // create title bar
  e = document.createElement("div");
  e.id = "NSPopTitle";
  // Make the box movable when the mouse is pressed on the title bar
  e.onmousedown = movePop
  e.onmouseup = endMovePop
  oTitle = oPop.appendChild(e);

  // Add a close button to the title bar
  e = document.createElement("img")
  e.style.width = "18px";
  e.style.height = "18px";
  e.style.magin = "1px";
  e.src = "close.gif";
  e.id ="NSPopCloseButton";
  e.onclick = closePopUp;
  oTitle.appendChild(e);

  // Add the Title Text
  e = document.createElement("div");
  e.id = "NSPopTitleText";
  e.innerHTML = title;
  oTitle.appendChild(e);

  // create body of popup
  e = document.createElement("div");
  e.id = "NSPopBodyFrame";
  e.style.height = (oPop.offsetHeight - oTitle.offsetHeight - 2) + "px";
  oBody = oPop.appendChild(e);
  e = document.createElement("div");
  e.id="NSPopBodyText";
  e.innerHTML = obj.innerHTML;
  oText= oBody.appendChild(e);
  
}

/* function closePopUp()
--------------------------------
   Removes the semi-transparent div
   Removes the Pop-Up window
   enables all elements
--------------------------------   */
function closePopUp(){
  oDiv = document.getElementById("NSPopTransparent");
  document.body.removeChild(oDiv);
  oDiv = document.getElementById("NSPopUP");
  document.body.removeChild(oDiv);
  enableAll(document.body,"input");
  enableAll(document.body,"select");
  enableAll(document.body,"textarea");
}      

/* function disableAll(obj,type)
--------------------------------   
  Disable all elements of the specified type
  within the specified object
-------------------------------- */
function disableAll(obj,type) {
  oInput = obj.getElementsByTagName(type);
  for (i=0;i<oInput.length ;i++) {
    oInput[i].disabled = true;
  }
}
 
/* function enableAll(obj,type)
--------------------------------   
   Enable all elements of the specified type
   within the specified object
--------------------------------  */   
function enableAll(obj,type) {
  oInput = obj.getElementsByTagName(type);
  for (i=0;i<oInput.length ;i++) {
    oInput[i].disabled = false;
  }
}
 
/* Global Variables required for popup move events
-------------------------------------------------- */
var mouseStartX = -99999;
var mouseStartY = -99999;
var popLeft;
var popTop;

/* function movePop()
----------------------------------
  Starts the watch for the mousemove
  and mouseup events on the document 
  object.
---------------------------------- */  
function movePop() {
  mouseStartX = -99999;
  mouseStartY = -99999;
  popLeft= document.getElementById("NSPopUP").offsetLeft;
  popTop = document.getElementById("NSPopUP").offsetTop;
  document.onmousemove = movePop1;
  document.onmouseup = endMovePop;
}

/* function movePop1(e)
----------------------------------
   perform the actual move of the popup
   e = mouse move event
---------------------------------- */   
function movePop1(e) {
  if (!e) var e = window.event;  // if IE, then we need to assign e
  if (e.pageX) {    // FF, opera, netscape
    posX = e.pageX;   
    posY = e.pageY;
  }
  else if (e.clientX) {  // IE
    posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;  
    posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  obj = document.getElementById("NSPopUP");
  if (mouseStartX == -99999) mouseStartX = posX;  // -99999 is an arbitrary number.  It is unlikely to be hit 
  if (mouseStartY == -99999) mouseStartY = posY;
  var offsetX = posX - mouseStartX; // determine the difference from where the mouse started to where it is now
  var offsetY = posY - mouseStartY;
  vPosX = popLeft + offsetX;
  vPosY = popTop + offsetY;
  // ensure that the pop-up is not moved off the screen
  if (vPosX < 0) vPosX = 0;
  if (vPosX + obj.offsetWidth > document.body.offsetWidth +10) vPosX = document.body.offsetWidth - obj.offsetWidth +10;
  if (vPosY < 0) vPosY = 0;
  if (document.body.offsetHeight > getWindowSize()[1]) {
    if (vPosY + obj.offsetHeight > document.body.offsetHeight + 20) vPosY = document.body.offsetHeight - obj.offsetHeight + 20;
  }
  else {
    if (vPosY + obj.offsetHeight > getWindowSize()[1] -1) vPosY = getWindowSize()[1] - obj.offsetHeight -1;
  }
  obj.style.left = vPosX + "px";
  obj.style.top = vPosY + "px";
}   

/* function endMovePop()
----------------------------------
   disables the watch for the mousemove and 
   mouseup events on the document object
---------------------------------- */   
function endMovePop() {
  document.onmousemove = function() {};
  document.onmouseup = function() {};
}

function getWindowSize() {
  var myWidth = 0;
  var myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) { 
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } 
  else if(document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
  } 
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight] ;
}

function getScrollXY() {
  var scrOfX = 0;
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } 
  else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } 
  else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function getNumericPortion(str) {
  return str.match(/\d*/);
}

div#NSPopUP 
{
    background-color:#e4e4e4;
    overflow:hidden;
    position:absolute;
    z-index:70;
    border: solid 1px #000;
}
div#NSPopTitle
{
  height: 20px;
  width: 100%;
  background-color: #0060ff;
  font-weight: bold;
  color: white;
  text-align:left;
}
img#NSPopCloseButton 
{
  float: right;
  margin-top:1px;
}
div#NSPopTitleText 
{
    margin-left: 5px;
    padding-top:3px;
}
div#NSPopTransparent 
{
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: #0000cc;
  z-index: 69;
}

div#NSPopBodyFrame 
{
  position: relative;
  width: 100%;
  overflow: auto;
}
div#NSPopBodyText 
{
    padding: 5px;
}