function OverWindow(width, height, overlay) {

  this.pageSize = null;
  this.overlay = null;
  this.content = null;
  this.win = null;
  this.width = width;
  this.height = height;
  this.destroyOverlayOnClose = true;
  
  this.close = function() {
	if(this.destroyOverlayOnClose)
		this.overlay.close();
    $(this.win).remove();
  };

  this.show = function(afterShow) {

    var overWindow = this;
    
    if(overlay)
      this.pageSize = overlay.pageSize;
    else 
      this.pageSize = this.overlay.pageSize;

    if(overlay) { 
      this.overlay = overlay;
      overWindow.buildWindow();
      if(afterShow)
        afterShow();
    } else {
      this.overlay = new Overlay(); 
      this.overlay.show(function() {
        overWindow.buildWindow();
        if(afterShow)
          afterShow();
      });
    }
   
    $(overlay.overlay).click(function() {
    	overWindow.close();
    });
    
  };
  
  this.buildWindow = function() {

    this.win = document.createElement('div');
    this.win.style.position = 'absolute';
    this.win.style.opacity = '0';
    var windowTop = this.height == null ? 70 : ($(window).height() - this.height) / 2;
    var winTop = $(window).scrollTop() + windowTop; 
    this.win.style.top = winTop + 'px';
    this.win.style.left = (this.pageSize[0] - this.width)/2 + 'px';
    this.win.style.width = this.width + 'px';
    if(this.height != null)
      this.win.style.height = this.height + 'px';
    this.win.style.zIndex = '10';
    this.win.style.textAlign = 'left';

    /* top */
    var top = document.createElement('div');
    top.style.height = '20px';
    $(this.win).append(top);

    var topLeft = document.createElement('div');
    topLeft.style.height = '20px';
    topLeft.style.width = '20px';
    topLeft.style.position = 'absolute';
    topLeft.style.background = "url('/img/overwindow-top-left.png')";
    $(top).append(topLeft);

    var topCenter = document.createElement('div');
    topCenter.style.height = '20px';
    topCenter.style.width = (this.width - 40) + 'px';
    topCenter.style.position = 'absolute';
    topCenter.style.marginLeft = '20px';
    topCenter.style.backgroundColor = 'white'; 
    $(top).append(topCenter);

    var topRight = document.createElement('div');
    topRight.style.height = '20px';
    topRight.style.width = '20px';
    topRight.style.position = 'absolute';
    topRight.style.marginLeft = (this.width - 20) + 'px';
    topRight.style.background = "url('/img/overwindow-top-right.png')";
    $(top).append(topRight);
/*
    var backContent = document.createElement('div');
    backContent.style.position = 'absolute';
    backContent.style.top = '0';
    backContent.style.left = '20px';
    backContent.style.width = (this.width - 40) + 'px';
    backContent.style.height = this.height + 'px';
    backContent.style.backgroundColor = 'white'; 
    $(this.win).append(backContent);

*/
  
    /* content */
    var content = document.createElement('div');
    content.style.top = '20px';
    content.style.left = '0';
    content.style.width = this.width + 'px';
    if(this.height != null)
      content.style.height = (this.height - 40) + 'px';
    content.style.backgroundColor = 'white'; 
    $(this.win).append(content);

    if(this.content != null)
      $(content).append(this.content);

    /* bottom */
    var bottom = document.createElement('div');
    bottom.style.height = '20px';
    $(this.win).append(bottom);

    var bottomLeft = document.createElement('div');
    bottomLeft.style.height = '20px';
    bottomLeft.style.width = '20px';
    bottomLeft.style.position = 'absolute';
    bottomLeft.style.background = "url('/img/overwindow-bottom-left.png')";
    $(bottom).append(bottomLeft);

    var bottomCenter = document.createElement('div');
    bottomCenter.style.height = '20px';
    bottomCenter.style.width = (this.width - 40) + 'px';
    bottomCenter.style.position = 'absolute';
    bottomCenter.style.marginLeft = '20px';
    bottomCenter.style.backgroundColor = 'white'; 
    $(bottom).append(bottomCenter);

    var bottomRight = document.createElement('div');
    bottomRight.style.height = '20px';
    bottomRight.style.width = '20px';
    bottomRight.style.position = 'absolute';
    bottomRight.style.marginLeft = (this.width - 20) + 'px';
    bottomRight.style.background = "url('/img/overwindow-bottom-right.png')";
    $(bottom).append(bottomRight);

    /* close icon */
    var closeIcon = document.createElement('img');
    closeIcon.style.position = 'absolute';
    closeIcon.style.top = '10px';
    closeIcon.style.left = (this.width - 40) + 'px';
    closeIcon.style.cursor = 'pointer';
    closeIcon.src = '/img/overwindow-close-icon.png';
    $(this.win).append(closeIcon);

    var overWindow = this;
    $(closeIcon).click(function() {
      overWindow.close();
    });

    $('body').append(this.win);
    $(this.win).animate({
      opacity: 1
    }, 800, function() {
    });  
  
  };

}

function Overlay() {

  this.overlay = null;
  this.pageSize = getPageSize();

  this.close = function() {
    $(this.overlay).remove();
  };

  this.show = function(afterShow) {

    this.overlay = document.createElement('div');
    this.overlay.style.position = 'absolute';
    this.overlay.style.opacity = '0';
    this.overlay.style.top = '0';
    this.overlay.style.left = '0';
    this.overlay.style.width = this.pageSize[0] + 'px';
    this.overlay.style.height = this.pageSize[1] + 'px';
    this.overlay.style.backgroundColor = 'black';
    this.overlay.style.zIndex = '8';

    $('body').append(this.overlay);

    $(this.overlay).animate({
      opacity: 0.7
    }, 800, function() {
      if(afterShow)
        afterShow();
    });

  };

  function getPageSize() {
    return [$(document).width(), $(document).height()];
  }

}