AjaxBox = {
  
  frameId: "ajax-box-frame",
  innerHTMLId: "ajax-box",
  
  open: function() {
    
    var viewWidth = document.viewport.getWidth();
    var offset = document.viewport.getScrollOffsets();
    var boxWidth = $(this.frameId).getWidth();
    
    $(this.frameId).setStyle(
        {
            top: "335px",
            left: Math.round(((viewWidth + offset.left) - boxWidth) / 2).toString() + "px",
            display: "block"
            }
        );
    
  },
  
  close: function() {
    
    $(this.frameId).setStyle(
        {
            display: "none"
            }
        );
    
  },
  
  setContent: function(content) {
    
    $(this.innerHTMLId).update(content);
    
  }
  
};

Viewport = {
  
  screenId: "lock-screen",
  
  lock: function() {
    
    var htmlTag = document.getElementsByTagName("html")[0];
    
    var viewWidth = Element.getWidth(htmlTag);
    var viewHeight = document.viewport.getHeight() > Element.getHeight(htmlTag) ? document.viewport.getHeight() : Element.getHeight(htmlTag);
    
    $(this.screenId).setStyle(
        {
            width: viewWidth.toString() + "px",
            height: viewHeight.toString() + "px", 
            display: "block"
            }
        );
    
  },
  
  unlock: function() {
    
    $(this.screenId).setStyle(
        {
            display: "none"
            }
        );
    
  }
  
};

showMsgBox = function(title, msg) {
  
  Viewport.lock();
  
  AjaxBox.open();
  AjaxBox.setContent("<h1>" + title + "</h1>" + '<div class="ajax-box-content">' + msg + "</div>");
  
};