var Tooltip = Class.create({

  initialize : function(element, options) {
  
    this.options = Object.extend({
      'className' : 'arrow-bottom',
      'maxWidth' : 200,
      'selector' : 'div.help'
    }, options||{});
  
    this.element = $(element);
  
    this.build();
  },
  
  build : function() {   
    var template = '<div class="hd"><div class="tr"></div><div class="tl"></div><div class="t"><div></div></div></div><div class="bd"><div class="r"><div></div></div><div class="l"><div></div></div><div class="c"><div class="content"></div></div></div><div class="ft"><div class="br"></div><div class="bl"></div><div class="b"><div></div></div></div>';
    
    this.tooltip = new Element('div', { 'class' : 'tooltip '+ this.options.className }).setStyle({
    	'display' : 'none',
      'left' : '0',
      'top' : '0'
    }).update(template);
    
    Element.insert(document.body, this.tooltip);
    
    this.content = this.tooltip.down('.content');
    
    this.hidden = new Element('div', { 'id' : 'hidden-tooltip' }).setStyle({
      'position' : 'absolute',
      'left' : '-9999px',
      'top' : 0
    });
    
    Element.insert(document.body, this.hidden);
    
    this.items = this.element.select(this.options.selector);

    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);  
  },
  
  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();
    var targetHeight = element.getHeight();
    
		if(this.options.className == 'arrow-bottom') { 
			return {
	      left : (left + (targetWidth / 2)) - (dims.width / 2) ,
       	top : top - (dims.height)
			};
		} else if(this.options.className == 'arrow-left') {
			return {
	 			left : left + targetWidth,
	      top : top - (dims.height / 2)+(targetHeight / 2)
			}; 
      
		}
  },
 
  onMouseEnter : function(e) {
		var element = e.findElement(this.options.selector);   	  
		this.hidden.update(element.innerHTML);
		this.content.update(element.innerHTML);
		this.tooltip.setStyle({
		  width : Math.min(this.hidden.getWidth(), this.options.maxWidth)+'px'
		});
		
		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();
  },
  
  updateContent : function(content) {
  	this.content.update(content);
  }
});