(function($){

var ns = 'OverlayBox';

window[ns] = function ( options ) {
  this.options  = options || {};
  this.button   = $(options.button);
  
  if ( ! this.button.length ) return;
  
  this.init();
  this.prepare();
  this.observe();
};

window[ns].prototype = {
  
  init: function () {
    this.topOffset = 0;
    this.leftOffset = 0;
    this.overlaying = false;
  },
  
  prepare: function () {
    this.overlay = $('<div>').addClass('overlaybox-overlay').appendTo('body').hide();
    this.showroom = $('<div>').addClass('overlaybox-showroom').appendTo('body').hide();
    this.close = $('<div>').addClass('overlaybox-close').appendTo('body').hide();
    
    this.overlay.css({
      position: 'absolute',
      top: 0, left: 0,
      background: 'black',
      opacity: 0.8
    });
    this.showroom.css({
      position: 'absolute',
      top: 0, left: 0,
      background: 'white',
      overflow: this.options.overflow
    });
    this.close.css({
      opacity: 0.8
    });
  },
  
  observe: function () {
    this.button.click( $.proxy( this.click, this ) );
    $(window).resize( $.proxy( this.resize, this ) );
    $(window).scroll( $.proxy( this.scroll, this ) );
    this.overlay.click( $.proxy( this.exit, this ) );
    this.close.click( $.proxy( this.exit, this ) );
  },
  
  scroll: function () {
    if ( ! this.overlaying ) return;
    this.position('scroll');
    this.center('scroll');
  },
  
  resize: function () {
    if ( ! this.overlaying ) return;
    this.position('resize');
    this.center('resize');
  },
  
  click: function ( event ) {
    event.preventDefault();
    var element = $(event.currentTarget);
    var id = element.attr(this.options.attrid);
    this.ajax_fullURL = this.options.ajax_url + '?id=' + id;
    this.show();
    this.overlaying = true;
  },
  
  position: function ( type ) {
    var win = $(window);
    var height = win.height();
    var width  = win.width();
    
    var css = {};
    if ( type == 'scroll' || type == 'all' ) {
      css.top  = win.scrollTop();
      css.left = win.scrollLeft();
    }
    if ( type == 'resize' || type == 'all' ) {
      css.width  = width;
      css.height = height;
    }
    
    this.overlay.css(css);
  },
  
  center: function ( type ) {
    var win = $(window);
    var height = win.height();
    var width  = win.width();

    if ( type != 'resize' ) {
      this.topOffset = win.scrollTop();
      this.leftOffset = win.scrollLeft();
    }
    
    var css = {};
    if ( height > this.options.maxHeight + this.options.topGap + this.options.bottomGap ) {
      css.height = this.options.maxHeight;
      css.top = this.topOffset + ( height - this.options.maxHeight ) / 2;
    } else {
      css.height = height - this.options.topGap - this.options.bottomGap;
      css.top = this.topOffset + this.options.topGap;
    }
    css.width = this.options.width;
    css.left = this.leftOffset + ( width - this.options.width ) / 2;
    
    this.showroom.css(css);
    
    var css2 = {};
    css2.left = css.left + css.width - 30;
    css2.top = css.top - 40;
    this.close.css(css2);
  },
  
  show: function () {
    this.position('all');
    this.overlay.fadeIn();
    this.showroom.load( this.ajax_fullURL, $.proxy( this.loaded, this ) );
  },
  
  loaded: function () {
    this.center('all');
    this.showroom.fadeIn();
    this.close.fadeIn();
    this.showroom.scrollTop(0);
    (this.options.callback || $.noop)();
  },
  
  exit: function () {
    if ( ! this.overlaying ) return;
    this.overlaying = false;
    this.overlay.fadeOut();
    this.close.fadeOut();
    this.showroom.fadeOut( function () { $(this).empty(); } );
  }
  
}


})(jQuery);