/**
 * SUBMODAL v1.4
 * Used for displaying DHTML only popups instead of using buggy modal windows.
 *
 * By Seth Banks (webmaster at subimage dot com)
 * http://www.subimage.com/
 *
 * Contributions by:
 *    Eric Angel - tab index code
 *    Scott - hiding/showing selects for IE users
 *    Todd Huss - inserting modal dynamically and anchor classes
 *
 * Up to date code can be found at http://www.subimage.com/dhtml/subModal
 * 
 *
 * This code is free for you to use anywhere, just keep this comment block.
 */

// Popup code
var gPopupMask = null;
var gPopupContainer = null;
var gPopFrame = null;
var gReturnFunc;
var gPopupIsShown = false;

var gHideSelects = false;


var gTabIndexes = new Array();
// Pre-defined list of tags we want to disable/enable tabbing into
var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME");      

// If using Mozilla or Firefox, use Tab-key trap.
if (!document.all) {
      
      document.onkeypress = keyDownHandler;
}



/**
 * Initializes popup code on load.  
 */
function initPopUp() {
      // Add the HTML to the body
      scroll(0,10);
      theBody = document.getElementsByTagName('BODY')[0];
      popmask = document.createElement('div');
      popmask.id = 'popupMask';
      popcont = document.createElement('div');
      popcont.id = 'popupContainer';
      popcont.innerHTML = '' +
            '<div id="popupInner">' +
                  '<iframe style="width:100%;height:100%;background-color:transparent;" scrolling="no" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>' +
            '</div>';
      theBody.appendChild(popmask);
      theBody.appendChild(popcont);
            
      gPopupMask = document.getElementById("popupMask");
      gPopupContainer = document.getElementById("popupContainer");
      gPopFrame = document.getElementById("popupFrame");    
            
      // check to see if this is IE version 6 or lower. hide select boxes if so
      // maybe they'll fix this in version 7?
      var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
      if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
            gHideSelects = true;
      }
      
}

 /**
      * @argument width - int in pixels
      * @argument height - int in pixels
      * @argument url - url to display
      * @argument returnFunc - function to call when returning true from the window.
      * @argument showCloseBox - show the close box - default true
      */

function showPopWin(url, width, height) {
	
      gPopupIsShown = true;
      disableTabIndexes();
      gPopupMask.style.display = "block";
      gPopupContainer.style.display = "block";
      
      // calculate where to place the window on screen

      centerPopWin(width, height);
      
      gPopupContainer.style.width = width + "px";
      gPopupContainer.style.height = height + "px";
      
      setMaskSize();
      gPopFrame.style.width = width +"px";
      gPopFrame.style.height = height + "px";
      
      // set the url
      gPopFrame.src = url;
      
            // for IE
      if (gHideSelects == true) {
            hideSelectBoxes();
      }
    
}

//
var gi = 0;
function centerPopWin(width, height) {
		
  if (gPopupIsShown == true) {
            if (width == null || isNaN(width)) {
                  width = 370; //gPopupContainer.offsetWidth;
            }
            if (height == null || isNaN(height) || (!height) ) {
                  height = 255; //gPopupContainer.offsetheight;
                
            }
			var temp = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
            var theBody = document.getElementsByTagName("BODY")[0];
            var scTop = parseInt((window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop) , 10) 
            var scLeft = parseInt(theBody.scrollLeft,10);
            
            setMaskSize();
            
            var fullHeight = getViewportHeight();
            var fullWidth = getViewportWidth();
            
            var topSpace = (scTop + ((fullHeight - height) / 2) - 100);
            if(topSpace <= 0) {
                  topSpace = 92;
            }
            gPopupContainer.style.top = "100px";
            gPopupContainer.style.left =  "200px";

      }
      addEvent(window, "resize", centerPopWin);
      window.onscroll = centerPopWin;

}

/**
 * Sets the size of the popup mask.
 *
 */
function setMaskSize() {
		
      var theBody = document.getElementsByTagName("BODY")[0];
                  
      var fullHeight = getViewportHeight();
      var fullWidth = getViewportWidth();
      
      if (fullHeight > theBody.scrollHeight) {
            popHeight = fullHeight;
      } else if(navigator.appName == "Netscape"){ //-- This is for Crome and Netscape, as theBody.scrollHeight keep adding up and is incorrect
      		 popHeight = fullHeight;
      }else {         
            popHeight = theBody.scrollHeight;
      }
      
      if (fullWidth > theBody.scrollWidth) {
            popWidth = fullWidth;
      } else {
            popWidth = theBody.scrollWidth;
      }
      
      if(navigator.appName == 'Microsoft Internet Explorer') {
            gPopupMask.style.height = popHeight + "px";
            gPopupMask.style.width = popWidth + "px";
      } else {
            gPopupMask.style.height = "2200px";
            gPopupMask.style.width = popWidth - 17 + "px";
      }
}

/**
 * @argument callReturnFunc - bool - determines if we call the return function specified
 * @argument returnVal - anything - return value 
 */
function hidePopWin(callReturnFunc) {
		
      gPopupIsShown = false;
      var theBody = document.getElementsByTagName("BODY")[0];
      theBody.style.overflow = "";
      restoreTabIndexes();
      if (gPopupMask == null) {
            return;
      }
      gPopupMask.style.display = "none";
      gPopupContainer.style.display = "none";
      // display all select boxes
      if (gHideSelects == true) {
            displaySelectBoxes();
      }
}


// Tab key trap. iff popup is shown and key was [TAB], suppress it.
// @argument e - event - keyboard event that caused this function to be called.
function keyDownHandler(e) {
		
    if (gPopupIsShown && e.keyCode == 9)  return false;
}

// For IE.  Go through predefined tags and disable tabbing into them.
function disableTabIndexes() {
		
      if (document.all) {
            var i = 0;
            for (var j = 0; j < gTabbableTags.length; j++) {
                  var tagElements = document.getElementsByTagName(gTabbableTags[j]);
                  for (var k = 0 ; k < tagElements.length; k++) {
                        gTabIndexes[i] = tagElements[k].tabIndex;
                        tagElements[k].tabIndex="-1";
                        i++;
                  }
            }
      }
}

// For IE. Restore tab-indexes.
function restoreTabIndexes() {
		
      if (document.all) {
            var i = 0;
            for (var j = 0; j < gTabbableTags.length; j++) {
                  var tagElements = document.getElementsByTagName(gTabbableTags[j]);
                  for (var k = 0 ; k < tagElements.length; k++) {
                        tagElements[k].tabIndex = gTabIndexes[i];
                        tagElements[k].tabEnabled = true;
                        i++;
                  }
            }
      }
}


/**
* Hides all drop down form select boxes on the screen so they do not appear above the mask layer.
* IE has a problem with wanted select form tags to always be the topmost z-index or layer
*
* Thanks for the code Scott!
*/
function hideSelectBoxes() {

      for(var i = 0; i < document.forms.length; i++) {
            for(var e = 0; e < document.forms[i].length; e++){
                  if(document.forms[i].elements[e].tagName == "SELECT") {
                        document.forms[i].elements[e].style.visibility="hidden";
                  }
            }
      }
}

/**
* Makes all drop down form select boxes on the screen visible so they do not reappear after the dialog is closed.
* IE has a problem with wanted select form tags to always be the topmost z-index or layer
*/
function displaySelectBoxes() {
		
      for(var i = 0; i < document.forms.length; i++) {
            for(var e = 0; e < document.forms[i].length; e++){
                  if(document.forms[i].elements[e].tagName == "SELECT") {
                  document.forms[i].elements[e].style.visibility="visible";
                  }
            }
      }
}

function addEvent(obj, evType, fn){

	
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, false);
    return true;
 } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
 } else {
    return false;
 }
}
function removeEvent(obj, evType, fn, useCapture){
  if (obj.removeEventListener){
    obj.removeEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.detachEvent){
    var r = obj.detachEvent("on"+evType, fn);
    return r;
  } else {
     return false;
  }
}

/**
 * Code below taken from - http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/
 *
 * Modified 4/22/04 to work with Opera/Moz (by webmaster at subimage dot com)
 *
 * Gets the full width/height because it's different for most browsers.
 */
function getViewportHeight() {
		
      if (screen.height) return screen.height; 
      if (window.innerHeight!=window.undefined) return window.innerHeight; //FF //IE some
      if (document.compatMode=='CSS1Compat') return screen.height; //document.body.offsetHeight; // document.body.scrollHeight; //document.documentElement.clientHeight ; //IE
      if (document.body.clientheight ) return document.body.clientHeight ; //others
      return window.undefined; 
}
function getViewportWidth() {
		
      if (window.innerWidth!=window.undefined) return window.innerWidth; 
      if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
      if (document.body) return document.body.clientWidth; 
      return window.undefined; 
}


/**
 * Initializes popup code on load.  
 */

function initDesignPopUp() {

		
      // Add the HTML to the body
      scroll(0,10);
      theBody = document.getElementsByTagName('BODY')[0];
      popmask = document.createElement('div');
      popmask.id = 'popupMask';
      popcont = document.createElement('div');
      popcont.id = 'popupContainer';
      popcont.innerHTML = '' +
            '<div>' +
                  '<iframe style="width:100%;height:100%;background-color:transparent;  overflow-x: hidden;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>' +
            '</div>';
      theBody.appendChild(popmask);
      theBody.appendChild(popcont);
            
      gPopupMask = document.getElementById("popupMask");
      gPopupContainer = document.getElementById("popupContainer");
      gPopFrame = document.getElementById("popupFrame");    
            
      // check to see if this is IE version 6 or lower. hide select boxes if so
      // maybe they'll fix this in version 7?
      var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
      if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
            gHideSelects = true;
      }
      
}

function CloseModalPopup() {  
      window.parent.location.reload();          
}


function showPopUp(showURL,height,width){  
                       initPopUp();                                    
                  showPopWin(showURL, height , width, null);
}

function showDesignPopUp(showURL,height,width){  
                  initDesignPopUp();                                    
                  showPopWin(showURL, height , width, null);
}

<!--/* SCRIPT for DHTML POPUP ends here */-->