var Tips = new Class({

  options: {
    onShow: function(tip){
      tip.setStyle('visibility', 'visible');
    },
    onHide: function(tip){
      tip.setStyle('visibility', 'hidden');
    },
    maxTitleChars: 30,
    showDelay: 100,
    hideDelay: 100,
    className: 'tool',
    offsets: {'x': 16, 'y': 16},
    fixed: false
  },

  initialize: function(elements, options){
    this.setOptions(options);
    this.toolTip = new Element('div', {
      'class': this.options.className + '-tip',
      'styles': {
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'visibility': 'hidden'
      }
    }).inject(document.body);
    this.wrapper = new Element('div').inject(this.toolTip);
    $$(elements).each(this.build, this);
    if (this.options.initialize) this.options.initialize.call(this);
  },

  build: function(el){
    el.$tmp.imgLoc = el.src.replace(/\_m.jpg/g,'_b.jpg');
    el.$tmp.imgSrc = el.alt;
    
    el.addEvent('mouseenter', function(event){
      this.start(el);
      if (!this.options.fixed) this.locate(event);
      else this.position(el);
    }.bind(this));
    if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
    var end = this.end.bind(this);
    el.addEvent('mouseleave', end);
    el.addEvent('trash', end);
  },

  start: function(el){
    this.wrapper.empty();
    
    this.wrapper.setHTML("<img src='"+el.$tmp.imgLoc+"' alt='' border='0' /><span>Bron: "+el.$tmp.imgSrc+"</span>");
    
    $clear(this.timer);
    this.timer = this.show.delay(this.options.showDelay, this);
  },

  end: function(event){
    $clear(this.timer);
    this.timer = this.hide.delay(this.options.hideDelay, this);
  },

  position: function(element){
    var pos = element.getPosition();
    this.toolTip.setStyles({
      'left': pos.x + this.options.offsets.x,
      'top': pos.y + this.options.offsets.y
    });
  },

  locate: function(event){
    var win = {'x': window.getWidth(), 'y': window.getHeight()};
    var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
    var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
    var prop = {'x': 'left', 'y': 'top'};
    var diff = {'x': (win.x-950)/2, 'y': 0};
    for (var z in prop){
      var pos = event.page[z] + this.options.offsets[z];
      if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
      this.toolTip.setStyle(prop[z], pos-diff[z]);
    };
  },

  show: function(){
    if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
    this.fireEvent('onShow', [this.toolTip]);
  },

  hide: function(){
    this.fireEvent('onHide', [this.toolTip]);
  }

});

Tips.implement(new Events, new Options);

addLoadEvent(function(){
  var myTips = new Tips($$('.toolTipImg'));
});