/**
 * MooWindow for Mootools
 *
 * Example: var demo = new MooWindow('demo','images/demo.jpg', {height:200, width:300});
 *
 * @version		1.0
 *
 * @license		MIT-style license
 * @author		Ajimix <ajimix[at]ajimix[dot]net>
 */

var MooWindow = new Class({
  Implements: [Options, Events],
    options:  {
      duration: 300,
      mode: 'fade'
    },
    
    initialize: function(element, source, options) {
      this.setOptions(options);
      this.element = $(element);
      this.image = new Element('img', {
        'styles': {
          'position': 'absolute',
        },
        'src': source
      });
      this.width = this.image.width;
      if (this.options.width){
        this.width = this.options.width;
        this.image.setStyle('width', this.width);
      }
      this.height = this.image.height;
      if (this.options.height){
        this.height = this.options.height;
        this.image.setStyle('height', this.height);
      }
      this.element.setStyles({
        height: this.height,
        width: this.width,
        overflow: 'auto'
      });
      this.element.addEvents({
        'mouseleave': this.show.bindWithEvent(this)
      });
      this.top = this.element.getPosition().y;
      this.left = this.element.getPosition().x;
      this.mask = new Element('div', {
        'styles':{
          'position': 'absolute',
          'top': this.top,
          'left': this.left,
          'z-index': 100,
          'overflow': 'hidden',
          'width': this.width+1,
          'height': this.height+1
        },
        'events': {
          'mouseenter':this.hide.bindWithEvent(this)
        },
        'id': 'windowMask'
      });
      this.effect = new Fx.Tween(this.mask, {duration: this.options.duration});
      this.image.inject(this.mask);
      document.body.appendChild(this.mask);
    },
    
    hide: function(e) {
      if (this.options.mode == 'fade'){
        this.mask.fade('toggle');
      } else {
        this.effect.start('height', '0px');
      }
    },
    
    show: function(e) {
      if (this.options.mode == 'fade'){
        this.mask.fade('toggle');
      } else {
        this.effect.start('height', this.height);
      }
    }
});