var _texto_axuda = {
	'nif': 'El campo N.I.F. debe contener 9 caracteres (8 dígitos numéricos y una letra situada al final)',
	'extranjero': 'El campo USUARIO debe contener 10 caracteres con las letras EX_ en las tres primeras posiciones',
	'niff' : 'El campo N.I.F. debe contener 9 caracteres (8 dígitos numéricos y una letra situada al final)',
	
	'nifext' : '<ul><li>Usuario atleta<br/><ul style=\"padding-left:5px;\"><li>- Atletas españoles y extranjeros residentes NIF (8 números y una letra) NIE (letra)</li><li>- Atletas extranjeros no residentes: el usuario debe contener \"EX_\" en las 3 primeras posiciones</li></ul></li><li style=\"margin: 10px 0 0 0;\">Usuario club<br><ul style=\"padding-left:5px;\"><li>CIF (letra seguida de 8 dígitos)</li></ul></li><li style=\"margin: 10px 0 0 0;\">Usuario organizador<br/><ul style=\"padding-left:5px;\"><li>Usaurio libre</li></ul></li></ul>',
	
	'nifext_old' : 'Para atletas españoles el campo N.I.F. debe contener 9 caracteres (8 dígitos numéricos y una letra situada al final). Para extranjeros el campo USUARIO debe contener 10 caracteres con las letras EX_ en las tres primeras posiciones. Para Clubs el campo C.I.F. debe contener 9 caracteres (una letra situada al comienzo y 8 dígitos numéricos)',
	    
	'nifextorga' : 'Para atletas españoles el campo N.I.F. debe contener 9 caracteres (8 dígitos numéricos y una letra situada al final). Para extranjeros el campo USUARIO debe contener 10 caracteres con las letras EX_ en las tres primeras posiciones. Si, en caso de extranjeros, no desea rellenar el campo puede ignorarlo, con lo que se generará un identidicador aleatorio. ',
	'fecha' : 'El campo FECHA DE NACIMIENTO debe contener una fecha válida en formato DD-MM-AAAA donde DD es el día, MM es el mes y AAAA el año',
	'contrasenha' : 'El campo CONTRASEÑA debe contener entre 6 y 10 caracteres (letras y/o números)',
	'contrasenha2' : 'El contenido del campo CONTRASEÑA y del campo REPITA CONTRASEÑA deben de ser idénticos',
	'mail' : 'El campo E-MAIL debe contener entre 1 y 50 caracteres (letras, dígitos numéricos, puntos y @)',
	'repitamail' : 'El campo REPITA E-MAIL debe contener entre 1 y 50 caracteres (letras, dígitos numéricos, puntos y @)',
	'chipamarillo' : 'El campo CHIP AMARILLO debe contener 7 caracteres sin guiones ni espacios',
	'marca' : 'El campo de tipo MARCA debe contener un tiempo en formato HH:MM:SS donde HH son las horas, MM son los minutos e SS los segundos' };

// Tooltip Object
var Tooltip = Class.create();
Tooltip.prototype = {
	initialize: function(el, options) {
		this.el = $(el);
		this.initialized = false;
		this.setOptions(options);
		
		// Event handlers
		this.showEvent = this.show.bindAsEventListener(this);
		this.hideEvent = this.hide.bindAsEventListener(this);
		this.updateEvent = this.update.bindAsEventListener(this);
		Event.observe(this.el, "mouseover", this.showEvent );
		Event.observe(this.el, "mouseout", this.hideEvent );
		
		// Removing title from DOM element to avoid showing it
		//this.content = this.el.title;
		//this.el.title = "";
		var _texto_contenido = _texto_axuda[this.el.getAttribute('rel')].unescapeHTML();
		if (_texto_contenido == undefined)
			this.content = this.el.getAttribute('rel').unescapeHTML();
		else
			this.content = _texto_contenido; 

		// If descendant elements has 'alt' attribute defined, clear it
		this.el.descendants().each(function(el){
			if(Element.readAttribute(el, 'alt'))
				el.alt = "";
		});
	},
	setOptions: function(options) {
		this.options = {
			backgroundColor: '#C2C2C2', // Default background color
			borderColor: '#C2C2C2', // Default border color
			textColor: '', // Default text color (use CSS value)
			textShadowColor: '', // Default text shadow color (use CSS value)
			maxWidth: 250,	// Default tooltip width
			align: "left", // Default align
			delay: 250, // Default delay before tooltip appears in ms
			mouseFollow: true, // Tooltips follows the mouse moving
			opacity: .75, // Default tooltips opacity
			appearDuration: .25, // Default appear duration in sec
			hideDuration: 1 // Default disappear duration in sec
		};
		Object.extend(this.options, options || {});
	},
	show: function(e) {
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
		if(!this.initialized)
			this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
	},
	hide: function(e) {
		if(this.initialized) {
			this.appearingFX.cancel();
			if(this.options.mouseFollow)
				Event.stopObserving(this.el, "mousemove", this.updateEvent);
			new Effect.Fade(this.tooltip, {duration: this.options.hideDuration, afterFinish: function() { Element.remove(this.tooltip) }.bind(this) });
		}
		this._clearTimeout(this.timeout);
		
		this.initialized = false;
	},
	update: function(e){
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
		this.setup();
	},
	appear: function() {
	
	    // Fix que permite ejecutar código html en los mensajes de los tips
	    Builder._text = function(text){  
            var div = document.createElement("div");  
            div.innerHTML = text;  
            return div;  
        }  
	
	
		// Building tooltip container
		this.tooltip = Builder.node("div", {className: "tooltip", style: "display: none;" }, [
			Builder.node("div", {className:"xtop"}, [
				Builder.node("div", {className:"xb1", style:"background-color:" + this.options.borderColor + ";"}),
				Builder.node("div", {className:"xb2", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
				Builder.node("div", {className:"xb3", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
				Builder.node("div", {className:"xb4", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"})
			]),
			Builder.node("div", {className: "xboxcontent", style: "background-color:" + this.options.backgroundColor + 
				"; border-color:" + this.options.borderColor + 
				((this.options.textColor != '') ? "; color:" + this.options.textColor : "") + 
				((this.options.textShadowColor != '') ? "; text-shadow:2px 2px 0" + this.options.textShadowColor + ";" : "")}, this.content), 
			Builder.node("div", {className:"xbottom"}, [
				Builder.node("div", {className:"xb4", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
				Builder.node("div", {className:"xb3", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
				Builder.node("div", {className:"xb2", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
				Builder.node("div", {className:"xb1", style:"background-color:" + this.options.borderColor + ";"})
			]),
		]);
		document.body.insertBefore(this.tooltip, document.body.childNodes[0]);
		
		Element.extend(this.tooltip); // IE needs element to be manually extended
		this.options.width = this.tooltip.getWidth();
		this.tooltip.style.width = this.options.width + 'px'; // IE7 needs width to be defined
		
		this.setup();
		
		if(this.options.mouseFollow)
			Event.observe(this.el, "mousemove", this.updateEvent);
			
		this.initialized = true;
		this.appearingFX = new Effect.Appear(this.tooltip, {duration: this.options.appearDuration, to: this.options.opacity });
	},
	setup: function(){
		// If content width is more then allowed max width, set width to max
		if(this.options.width > this.options.maxWidth) {
			this.options.width = this.options.maxWidth;
			this.tooltip.style.width = this.options.width + 'px';
		}
			
		// Tooltip doesn't fit the current document dimensions
		if(this.xCord + this.options.width >= Element.getWidth(document.body)) {
			this.options.align = "right";
			this.xCord = this.xCord - this.options.width + 20;
		}
		
		this.tooltip.style.left = this.xCord - 7 + "px";
		this.tooltip.style.top = this.yCord + 12 + "px";
	},
	_clearTimeout: function(timer) {
		clearTimeout(timer);
		clearInterval(timer);
		return null;
	}
};


Event.observe(window, 'load', function() {
	$$("img.img_cutretip").each( function(img) {
		new Tooltip(img, {backgroundColor: "#eeeeee", borderColor: "#ccc", 
		textColor: "#000"});
	});
});