var Tooltip = Class.create({
  initialize : function(element, options) {
    this.options = Object.extend({
      'inline' : false,
      'inlineSelector' : 'span.help',
      'selector' : 'span.help',
      'toolTipWidth' : 219
    }, options||{});

    this.element = $(element);

    this.build();
  },

  addListeners : function() {
    this.onMouseEnterListener = this.onMouseEnter.bindAsEventListener(this);
    this.onMouseLeaveListener = this.onMouseLeave.bindAsEventListener(this);

    this.items.each(function(el) {
      el.observe('mouseover', this.onMouseEnterListener);
      el.observe('mouseout', this.onMouseLeaveListener);
    }.bind(this));

    this.tooltip.observe('mouseout', this.onMouseLeaveListener);
  },

  build : function() {
    var template = '<div class="t"></div><div class="m"><div class="content"></div></div><div class="b"></div>';

    this.tooltip = new Element('div', { 'class' : 'tooltip' }).setStyle({
      'display' : 'none',
      'left' : '0',
      'top' : '0'
    }).update(template);

    Element.insert(document.body, this.tooltip);

    this.content = this.tooltip.down('.content');

    this.items = this.element.select(this.options.selector);

    this.addListeners();
  },

  getPosition : function(element) {
    var dims = this.tooltip.getDimensions();
    var pos = element.viewportOffset();
    var scroll = document.viewport.getScrollOffsets();

    var left = scroll.left+pos.left;
    var top = scroll.top+pos.top;

    var targetWidth = element.getWidth();

    return {
      left : (left + (targetWidth / 2)) - 26,
      top : top - (dims.height)
    };
  },

  onMouseEnter : function(e) {
    var element = e.findElement(this.options.selector);
    this.content.update(this.getContent(element));

    var pos = this.getPosition(element);

    this.tooltip.setStyle({
      left : pos.left+'px',
      top : pos.top+'px'
    }).show();
  },

  onMouseLeave : function(e) {
    if(e.relatedTarget && Element.descendantOf(e.relatedTarget, this.tooltip)) return false;
    this.tooltip.hide();
  },

  getContent : function(el) {
    if(this.options.inline){
      return el.down(this.options.inlineSelector).innerHTML;
    }else{
      return el.innerHTML;
    }
  }
});