var Protip = Class.create({
	
	initialize: function(element){
		
		this.element 		= $(element);		
		this.addObservers();
		this.setupProtip();
		
	},
	
	setupProtip: function() {
		
		this.content 		= this.element.readAttribute('title');
		this.element.title 	= '';		
		this._protip	= new Element('div', {'class':'protip'}).update(this.content);
		$$('body')[0].insert(this._protip.hide());	

	},
	
	addObservers: function() {
		
		Event.observe(this.element, "mouseover", this.showProtip.bind(this));
   		Event.observe(this.element, "mouseout", this.hideProtip.bind(this));
    	Event.observe(this.element, "mousemove", this.moveProtip.bindAsEventListener(this));
		
	},
	
	showProtip: function() {
		
		this._protip.show();
			
	},
	
	hideProtip: function() {
		
		this._protip.hide();
      
	},
	
	moveProtip: function(event){
	
		this.mouseX = Event.pointerX(event);
		this.mouseY = Event.pointerY(event);			
		this._protip.setStyle({ top:this.mouseY + 20 + "px", left:this.mouseX + 15 + "px" });
	
	}

});