/*
Script: Focus.js
	Provides an extremley simple lightbox interface

Credits:
	Moo baby Moo!

License:
	MIT-style license.
*/

/*
Class: Focus
	Upon instantiation it creates a lightbox with the given element inside of it.  Clicking anywhere outside of it removes it from the DOM.

Arguments:
  element - the element you want inside of the lightbox

Options:

Example:
  (start code)
	new Focus(new Element('div').setHTML('totally awesome'))
	(end code)
*/
var Focus = new Class ({
  initialize: function(element) {
    var extras = {
      duration:600,
      onComplete: function(){
        if(this.to[0].value == 0) this.element.dispose()
      }
    }
    this.element = $(element)
    this.element.setStyles({
      position:'absolute',
      left:"50%",
      zIndex:1,
      marginLeft: '-'+(this.element.getSize().x/2)+"px",
      tween: extras,
      morph: {duration:200, link:'cancel'}
    }).fade('hide').dispose()
    this.element.getElements('form').addEvent('submit', this._form.bind(this))
    new Element('img', {
      src:'images/close.png', 
      styles:{position:'absolute', top:'-10px', right:'-10px', cursor:'pointer'},
      events:{click:this.stop.bind(this)}
    }).inject(this.element)
    this.trans = new Element("div",{
      styles:{
        background:"#000",
        position:"absolute",
        left:0,
        top:0,
        width:"100%",
        cursor:"pointer"
      },
      events:{
        click: this.stop.bind(this)
      },
      tween: extras
    }).fade('hide');
    this.recenter = new Fx.Tween(this.element, {link:'cancel'})
    window.addEvent('resize', this._resize.bind(this)).addEvent('resize', this._recenter.bind(this))
    window.addEvent('scroll', this._recenter.bind(this));
  },
  go: function(e) {
    e.stop()
    this.element.inject(document.body);
    this.trans.inject(document.body);
    this._resize();
    this._recenter();
    this.trans.fade(.64);
    this.element.fade();
  },
  stop: function() {
    window.removeEvent('resize', this.fillEvent).removeEvent('scroll', this.fillEvent);
    this.trans.fade(0);
    this.element.fade();
  },
  _form: function(e) {
    e.stop()
    var form = e.target;
    form.send()
    this.stop()
  },
  _resize: function() {
    this.trans.setStyles({
      height: window.getScrollHeight()
    });
  },
  _recenter: function() {
    this.recenter.start('top', window.getHeight() / 2 - this.element.getSize().y / 2 + window.getScrollTop())
  }
});