/* -------------------------------------------------------------------
BeautyTitle
	Tooltip para enlaces con atributo title
	Muestra el title y url de destino
	Propiedades CSS de Tooltip configurables en customize-beautytitle.js

Autor: M.C. Camara
Web: http://uninstallme.com
Modificado: 2008.09.16
Version Mootools: 1.2.0

Usalo, modificalo, mejoralo o destrozalo con total libertad
------------------------------------------------------------------- */ 





// Clase Tooltip
var Tooltip = new Class({
    Implements: Options,
    getOptions: function(){
        return {
            selector: 'a[title]',
            mostrarUrl: true,
            estilos: {
                colorFondo: '#000',
    			opacidad: 0.8,
    			colorTexto: '#fff',
    			padding: '5px',
    			colorUrl: '#FC2797',
    			radioEsquinas: null
            }
        }
    },


	initialize: function(options){
	    this.setOptions(this.getOptions(), options);

        this.mostrarUrlTT = this.options.mostrarUrl;
		this.selectorTT = $$(this.options.selector);
		this.colorFondoTT = this.options.estilos.colorFondo;
		this.opacidadTT = this.options.estilos.opacidad;
		this.colorTextoTT = this.options.estilos.colorTexto;
		this.colorUrlTT = this.options.estilos.colorUrl;
		this.paddingTT = this.options.estilos.padding;
		this.radioEsquinasTT = this.options.estilos.radioEsquinas;
		
		// inicio
		this.crearTooltips();
	},
	
	crearTooltips: function(){
		this.selectorTT.each(function(el){
			if(!el.getProperty('title')) return;
			var titleTT = el.getProperty('title');
			var url = el.getProperty('href');
			
			var capaTT = new Element('span',{'class': 'tt'});
			capaTT.set({
				styles: {
					'background-color': this.colorFondoTT,
					opacity: this.opacidadTT,
					color: this.colorTextoTT,
					padding: this.paddingTT,
				    position: 'absolute',
					'-moz-border-radius': this.radioEsquinasTT,
					'-webkit-border-radius': this.radioEsquinasTT
				},
				text: titleTT
			})
			el.erase('title');

            // elemento span que contiene url (opcional) en color destacado
            if(this.mostrarUrlTT){
    			var spanUrl = new Element('span',{'class': 'url'});
    			spanUrl.set('styles',{'color': this.colorUrlTT})
    			spanUrl.set({
    				html: '<br />' + url
    			})
    			capaTT.grab(spanUrl, 'bottom');
            }
						
			el.addEvent('mousemove', function(event){
			    var body = $$(document.body);
				body.grab(capaTT, 'bottom');
				capaTT.fade(this.opacidadTT);
				
				// obtengo posicion x e y del cursor
				var posX = this.obtenerPosicionCursor(event)[0]; // posicion eje horizontal
				var posY = this.obtenerPosicionCursor(event)[1]; // posicion eje vertical
	
				// ajusto posicion x en relacion al area visible del documento
				var anchuraActualWindow = this.obtenerViewport()[0];
				var anchuraCapaTT = capaTT.getSize().x;

				var calculoAnchura = anchuraActualWindow - anchuraCapaTT;
				if(posX >= calculoAnchura){posX = posX - anchuraCapaTT - 25}

				capaTT.set({
					styles: {
						top: posY,
						left: posX
					}
				})
				el.addClass('activo_tt');
			}.bind(this))
			
			el.addEvent('mouseout', function(){
				if(el.hasClass('activo_tt')){
					capaTT.dispose();
				}
				el.removeClass('activo_tt');
			})			
		}.bind(this))
	},
	
	obtenerPosicionCursor: function(event){
		if(!event) event = window.event;
		var posX = event.page.x; 
		var posY = event.page.y;
		posX = posX + 15; // anchura del cursor
		posY = posY + 10;
		var posicionCursor = new Array();
		posicionCursor[0] = posX;
		posicionCursor[1] = posY;
		return posicionCursor;
	},
	
	obtenerViewport: function(){
		var dimensionesVentana = document.getSize();
		var anchuraDisponible = dimensionesVentana.x;
		var alturaDisponible = dimensionesVentana.y;
		var dimensiones = new Array();
		dimensiones[0] = anchuraDisponible;
		dimensiones[1] = alturaDisponible;
		return dimensiones;
	}
})