var tooltip = Class.create();
tooltip.prototype = {
	
	initialize: function(el) {
		this.el = $(el);
		
		this.initialized = false;

		this.attributes = {
			'color': '#5B9400',
			'cursor': 'pointer'
		};

		this.setAttributes();
		
		this.content = this.el.title.stripScripts().strip();
		this.el.title = "";
		
		//Events
		this.showEvent = this.show.bindAsEventListener(this);
		this.hideEvent = this.hide.bindAsEventListener(this);
		this.updateEvent = this.update.bindAsEventListener(this);
		
		Event.observe(this.el, "click", this.updateEvent);
		Event.observe(this.el, "mouseout", this.hideEvent);
		
		this.textelement = new Element("div",{"style":"display:none;"});
		this.textelement.addClassName("tooltip");
		this.textelement.innerHTML = this.content;
		$(document.body).insert({'top':this.textelement});
		
		
	},
		
	setAttributes:function() {
		this.el.setStyle(this.attributes);
	},
	
	show: function(e) {
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
			this.textelement.setStyle({
				'display': 'inline',
				'position': 'absolute',
				'left': this.xCord - 30 + 'px',
				'top': this.yCord - 30 + 'px',
				'maxWidth': '250px',
				'maxHeight': '20px'
			});
	},
	
	hide: function(e) {
		if(this.initialized) {
			this.textelement.setStyle({"display":"none"});
			this.initialized=false;
		} 
	},
	
	update: function(e) {
		if(!this.initialized) {
			this.show(e);
			this.initialized = true;
		} else {
			this.hide();
			this.initialized = false;
		}
	}

};

document.observe("dom:loaded", function() {

	$$('.tooltip').each(function(link) {
		new tooltip(link);
	});
		
});