var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, text) {
    this.element = $(element);
    this.text = text;
    if (!(this.tool_tip = $('juhp-tooltip'))) {
      $$('body')[0].insert({
        'top': new Element('div', { 'id': 'juhp-tooltip' })
      });
      this.tool_tip = $('juhp-tooltip');
    }

    this.hideTooltip();

    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut  = this.hideTooltip.bindAsEventListener(this);
    this.eventMouseMove = this.moveTooltip.bindAsEventListener(this);

    this.registerEvents();
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout",  this.eventMouseOut);
    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout",  this.eventMouseOut);
    Event.observe(this.element, "mousemove", this.eventMouseMove);
  },

  showTooltip: function(event) {
    this.moveTooltip(event);
    this.tool_tip.update(this.text);
    new Element.show(this.tool_tip);
  },
  moveTooltip: function(event) {
    Event.stop(event);
    Element.setStyle(this.tool_tip, {
      top: Event.pointerY(event) + 'px',
      left: Event.pointerX(event) + 'px'
    });
  },

  hideTooltip: function(event) {
    new Element.hide(this.tool_tip);
  }
}
Event.observe(window, 'load', function() {
  $$('#juhp-colors ul li').each(function(x){
    new Tooltip(x, x.title);
    x.title = '';
  });
});