var OverlayClass = Class.create();
OverlayClass.prototype = {

  initialize:function(contentBox, onClose, onOpen) {

    this.onClose    = onClose || function () { };
    this.onOpen     = onOpen  || function () { };
    this.contentBox = contentBox;

    this.htmlBody      = document.getElementsByTagName('body')[0];
    this.overLayer     = document.createElement("div");
    this.overLayer.id  = "overLayer";
    
    // this works for ie 6/7 ff and operra 
    this.bodyWidth   = (window.innerWidth) ? window.innerWidth : document.documentElement.clientWidth;
    this.bodyHeight  = (window.innerHeight >= this.htmlBody.offsetHeight) ? window.innerHeight : this.htmlBody.offsetHeight;
    

    this.showOverlay();
  },

  closeOverlay:function() {
    this.onClose();

    this.contentBox.hide();

    var overLayer;
    if (overLayer = this.overLayer) {
      new Effect.Opacity(overLayer, {
        duration:     0.35,
        from:         0.4,
        to:           0.1,
        afterFinish:  function() {
          try {
            this.htmlBody.removeChild($("overLayer"))
          }
          catch (e) { console.log(e); }
        }.bind(this)
      });
    }
  },

  showContentBox:function() {

    try {
        var w = parseInt(this.contentBox.getStyle('width'));
        var h = parseInt(this.contentBox.getStyle('height'));

        this.contentBox.setStyle(
            {
                left:     ((this.bodyWidth  / 2) - (w / 2)) + "px",
                top:      ((this.bodyHeight / 2) - (h / 2)) + "px",
                zIndex:   1000
            }
        );
        this.contentBox.show();

        setTimeout(function() {
            this.onOpen();
        }.bind(this),300);

    } catch (e) { console.log(e.message); }
  },


  showOverlay:function() {
    // Hintergrund
    $(this.overLayer).setStyle( { height: this.bodyHeight + 'px' } );
    this.htmlBody.appendChild($(this.overLayer));
    this.showContentBox();
  }
}