var WhiteBox = new Class({
    
  Implements: [Options, Events],
    
  options: {
    buttonControls: false,
    reloadPage: false,
    useShim: true,
    scrollBack: true,
    onLoaded: $empty,
    onClosed: $empty
  },
    
  initialize: function(el, options) {
    this.setOptions(options);

    if($type(el) == 'element') {
      el = document.id(el);
      this.url = el.get('data-url') || el.get('href');

      el.addEvent('click', function() {
        this.show();
        return false;
      }.bind(this));
    }
    else if($type(el) == 'string') { // url string
      this.url = el;
    }
  },
    
  show: function() {
    Loader.show();

    if(this.options.useShim) {
      this.shim = new Mask();
    }
        
    this.div = new Element('div').addClass('lightbox').setStyle('visibility', 'hidden');

    var bgWrapper = new Element('div').addClass('bg_wrapper').inject(this.div);
    var wrapper = new Element('div').addClass('wrapper').inject(bgWrapper);
    wrapper.store('whitebox', this);

    new Element('div').addClass('lightbox_footer').inject(this.div);
        
    this.div.inject(document.body);
        
    this.div.fx = new Fx.Morph( this.div, {
      duration: 300
    } );

    this.scroll = new Fx.Scroll(window);

    new Request.HTML({
      url: this.url,
      update: wrapper,
      method: 'get',
      onSuccess: function() {
        this.initialScroll = window.getScroll().y;
        this.scroll.toTop();

        this.div.setStyles({
          opacity: 0,
          visibility: 'visible'
        });
        this.div.fx.start({
          opacity: 1
        });

        if(this.options.useShim) {
          this.shim.show();
        }
                
        // fireEvent before ActionChain as data-open_tab is set by .inline_orders_print_shop action.
        this.fireEvent('onLoaded', wrapper);
                
        ActionChain.apply(wrapper);
        recalcShim();
        Loader.hide();
      }.bind(this),
      onFailure: requestFailure
    }).send();
  },
    
  hide: function() {
    var doHide = function() {
      if(this.div) {
        this.div.fx.start({
          opacity: 0,
          top: this.div.getStyle('top').toInt() + 10
          }).addEvent('onComplete', function() {
          this.div.dispose();
          if(this.options.scrollBack) {
            this.scroll.set(0, this.initialScroll);
          }
          this.fireEvent('onClosed');
        }.bind(this));

        if(this.options.useShim) {
          this.shim.hide();
        }
      }
    }.bind(this);
      
    if(this.options.reloadPage) {
      reloadPage(function() {
        doHide();
      }.bind(this));
    } else {
      doHide();
    }
  }
    
});