var Tip = Class.create();

Tip.prototype = {
		initialize: function(element, content){
			this.element = $(element);
			this.content = content;
			this.buildWrapper();
			this.activate();
		},
		
activate: function() {
    this.eventShow = this.showTip.bind(this);
    this.eventHide = this.hideTip.bind(this);
 
	Event.observe(this.element, 'mousemove', this.eventShow);
    Event.observe(this.element, 'mouseout', this.eventHide);
	
  },

	
buildWrapper: function(){
		this.wrapper = document.createElement('div');
		Element.setStyle (this.wrapper, {position:'absolute', display:'none', zIndex:'1000'});
		document.body.appendChild(this.wrapper);
},

buildTip: function(){
    this.tip = this.wrapper.appendChild(document.createElement('div'));
    this.tip.className = 'tip_content';
    Element.update(this.tip, this.content);
    Element.hide(this.tip);
	
},

 showTip: function(event){
    if (!this.tip) this.buildTip();
    this.positionTip(event); 
    
	if (this.wrapper.visible()) return;
    this.wrapper.show();
    this.tip.show(); 
},

hideTip: function(event){
	if(!this.wrapper.visible()) return;
	this.wrapper.hide();
	this.tip.hide();
	
},

positionTip: function(event){

    var pos = {
      left:Event.pointerX(event),
      top:Event.pointerY(event)
    }


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