/** 
 *   .popup { position: absolute; background-color: white; top: 100px; left: 100px; visibility: hidden; padding: 20px; border: 5px outset red; z-index: 999;}
 *   
 *   <div id="<DIVNAME>" class="popup">
 *       <p id="<DIVNAME>_msg"></p><br>
 *       <p align="center"><input id="<DIVNAME>_ok" type=button value=OK onclick="popupDialog.closePopup()"></p>
 *   </div>
 *   
 *   
 *    <script>
 *       var popupDialog = new PopupDialog("<DIVNAME>", "aber Hallo");
 *       popupDialog.popup();
 *   </script>
 *   
 *   
 *   popup('das geht so aber nicht');
 */

function PopupDialog(divName, msg) {
  this.divName = divName;
  this.msg = msg;
  
  this.popup = function(){
      this.divover(true);
      var popup     = document.getElementById(this.divName);
      var popup_msg = document.getElementById(this.divName+'_msg');
      popup_msg.innerHTML = this.msg;
      this.zentrieren(popup);
      popup.style.visibility = 'visible';
      document.getElementById(this.divName+"_ok").focus();
  }
  this.closePopup = function(){
      var popup     = document.getElementById(this.divName);
      popup.style.visibility = 'hidden';
      this.divover(false);
  }

  this.divover = function(state){
      if(state){
        this.divover.div = document.createElement("div");
        this.divover.div.className = 'divover';
        var dimBody = this.getDimension(document.body);
        document.body.insertBefore(this.divover.div, document.body.firstChild);
      } else {
          if(this.divover.div){
            document.body.removeChild(this.divover.div);
            this.divover.div = null;
          }
      }
  }
  this.zentrieren = function(element)
  {
      element.parentNode.removeChild(element);
      document.body.insertBefore(element, document.body.firstChild);      
      
      var dimElement = this.getDimension(element);
      element.style.top  = "" + (this.windowHeight() - dimElement.height)/2 + "px";
      element.style.left = "" + (this.windowWidth()  - dimElement.width)/2 + "px";
  }
  this.windowWidth = function() {
    if (window.innerWidth) {
      return window.innerWidth;
    } else if (document.body && document.body.offsetWidth) {
      return document.body.offsetWidth;
    } else {
      return 0;
    }
  }

  this.windowHeight = function() {
    if (window.innerHeight) {
      return window.innerHeight;
    } else if (document.body && document.body.offsetHeight) {
      return document.body.offsetHeight;
    } else {
      return 0;
    }
  }

  this.getDimension = function(element)
  {
      var x = y = 0;
      var node = element;
      if(node.nodeName != 'IFRAME'){
        while (node) {
            x += node.offsetLeft;
            y += node.offsetTop;
            node = node.offsetParent;
        }
      }
      var dimension= new Object();
      dimension.x=x;
      dimension.y=y;
      dimension.width  = element.offsetWidth;
      dimension.height = element.offsetHeight;
      return dimension;
  }
}