// --------------------------------------------------------------------------------------
// 	Creación de burbujas de ayuda
//
//  Versión:	1.0
//  Autor:		Juan G. Hurtado
// --------------------------------------------------------------------------------------

// Funcion encargada de mostrar y posicionar el objeto recibido por parametro
// Recibe el evento que se ejecuta, y el objeto que se ha de mostrar y posicionar
function Locate(e,obj){
	var posx = 0, posy = 0;
	
	if(e == null) e = window.event;
	
	// Obtención de coordenadas
	if(e.pageX || e.pageY){
	    posx = e.pageX; posy = e.pageY;
	}
	else if(e.clientX || e.clientY){
	    if(document.documentElement.scrollTop){
	        posx = e.clientX + document.documentElement.scrollLeft;
	        posy = e.clientY + document.documentElement.scrollTop;
		}
	    else{
	        posx = e.clientX + document.body.scrollLeft;
	        posy = e.clientY + document.body.scrollTop;
		}
	}
	
	// Cambio de estilos para mostrar y posicionar
	obj.style.display     = "block";
	obj.style.position    = "absolute";				
	obj.style.top         = (posy + 3) + "px";
	obj.style.left        = (posx - 40) + "px";
}


// Funcion que setea la opacidad del elemento recibido
// por parametro a un valor tambien recibido
function setOpacity(el, nm) {
	el.style.filter        = "alpha(opacity"+ nm +")";
	el.style.KHTMLOpacity  = "0."+ nm;
	el.style.MozOpacity    = "0."+ nm;
	el.style.opacity       = "0."+ nm;
}

// Reglas de comportamiento usando la librería Behaviour
var myrulesBubble = {
	// Les aplicamos los eventos a todos los elementos con clase 'enlaceAyuda'
	'.enlaceAyuda' : function(el){
		// onmouseover: Obtenemos el ID del elemento ayuda a mostrar, pasandoselo
		//							despues a la funcion Locate(), que se encargará de ello
		// 							Además, desactivamos el title del enlace, y creamos la
		// 							opacidad para la burbuja
		el.onmouseover = function(e){
			var idAyuda = el.href.substr(el.href.indexOf("#") + 1,el.href.length);
			Locate(e,$(idAyuda));

			el.title = "";
			setOpacity($(idAyuda),85);
		};

		// onmouseout:  Obtenemos el ID del elemento ayuda que vamos a ocultar
		// 							y cambiamos su propiedad CSS 'display' para ocultarlo
		el.onmouseout = function(){
			var idAyuda = el.href.substr(el.href.indexOf("#") + 1,el.href.length);
			$(idAyuda).style.display = "none";
		};
		
		// onmousemove: Obtenemos el ID del elemento ayuda que se está mostrando
		// 							y llamamos a Locate() para setear su nueva posicion
		// 							Además, desactivamos el title del enlace, y creamos la
		// 							opacidad para la burbuja
		el.onmousemove = function(e){
			var idAyuda = el.href.substr(el.href.indexOf("#") + 1,el.href.length);
			Locate(e,$(idAyuda));

			el.title = "";
			setOpacity($(idAyuda),85);
		};

		// onclick:			Obtenemos el ID del elemento ayuda al que se le va a cambiar
		//							el comportamiento. Cambiamos su atributo 'class', y sus
		//							propiedades de posicionamiento. Sobreescribimos los eventos
		//							del enlace de ayuda, para que no vuelva a mostrar la burbuja
		// 							de ayuda ni a ejecutar este comportamiento. Además devolvemos
		//							el valor 'false' con la función, para que el ancla del href
		//							no se ejecute
		el.onclick = function(e){
			var idAyuda = el.href.substr(el.href.indexOf("#") + 1,el.href.length);
			
			$(idAyuda).className       = "ayuda";
			$(idAyuda).style.display   = "block";
			$(idAyuda).style.position  = "static";

			el.onmouseover  = null;
			el.onmouseout   = null;
			el.onmousemove  = null;
			el.onclick      = null;

			return false;
		}
	},

	'#ayudas div.ayuda' : function(el) {
		el.className = 'ayudaBubble';
	} 
};

// Registramos las reglas especificadas en la
// variable 'myrules' para usarlas con Behaviour
Behaviour.register(myrulesBubble);

// Ocultamos las ayudas
if (document.getElementById && document.getElementsByTagName && document.createElement) {
	document.write('<style type="text/css">#ayudas div.ayudaBubble {display:none;}</style>');
}