/**
 * Muestra un tooltip sobre un elemento
 * 
 * Forma de uso:
 *
 * var help = new TitleHelp({
 * 		id : 'help, help2',                               //ids de los elementos sobre los que mostrar el tooltip, separados por comas
 * 		img : 'res/imgs/help.png',                 //ruta a la imagen que sustituye al texto
 *      alt : 'ayuda'                              //texto alternativo de la imagen
 * });
 */
function TitleHelp(props)
{
	this.ids = new Array();
	this.idsTmp = props.id.split(',');  document.getElementById(props.id);
	for (i=0; i<this.idsTmp.length; i++) {
		this.ids.push( document.getElementById(this.idsTmp[i]) );
	}
		
	this.img = props.img;
	this.alt = props.alt;

	/**
	 * Inicializa el tooltip
	 */
	this.init = function()
	{
		for (i=0; i<this.ids.length; i++)
		{
			this.ids[i].style.position = 'relative';
			this.tooltip = document.createElement('span');
			this.tooltip.appendChild( document.createTextNode(this.ids[i].firstChild.nodeValue) );
	
			this.ids[i].innerHTML = '';
			var img = document.createElement('img')
			img.setAttribute('src', this.img);
			img.setAttribute('alt', this.alt);
			img.style.cursor = 'help';
			this.ids[i].appendChild( img );
			
			this.tooltip.style.display = 'none';
			this.tooltip.style.position = 'absolute';
			this.tooltip.style.zIndex = '10';
			this.tooltip.style.top = this.ids[i].offsetHeight + 'px';
			this.tooltip.style.left = this.ids[i].offsetWidth + 'px';
			this.tooltip.className = this.ids[i].className;
			this.ids[i].className = '';
			this.ids[i].appendChild( this.tooltip );
			
			this.ids[i].onmouseover = function() {
				this.getElementsByTagName('span')[0].style.display = 'block';
			}
			this.ids[i].onmouseout = function() {
				this.getElementsByTagName('span')[0].style.display = 'none';
			}
		}
	}

	this.init();
}