Element.implement({
 show: function(){
        this.setStyle('display', 'block');
        this.setStyle('visibility', 'visible');
    },
    hide: function(){
        this.setStyle('display', 'none');
        this.setStyle('visibility', 'hidden');
    }
});

var Tooltips = new Class({
    Implements: Options,
    options: {
        objeto: "moo__tip",
        clase: "mootips",
        ancho: 250,
        alto: 150,
        fondo: "",
        html: "",
        div: "moo",
        posicion: "arriba",
        estiloInterior: "",
        evento: "over",
        bntCerrar: "",
        colorFondo: "",
        borde: "",
        forzarCierre: true,
        aliner: "",
        opacidad: 1,
        cerrarTodos: false,
		top:'',
		left:'',
		offsetX:0,
		offsetY:0
    },
    initialize: function(options){
        this.setOptions(options);
        this.cerrar();
        if (this.options.evento == "over") {
            this.bntCerrar = "";
        }
        
        
        moo___tip = new Element("div", {
            id: 'moo_tip__' + this.options.div,
            styles: {
                backgroundImage: 'url(' + this.options.fondo + ')',
                backgroundRepeat: 'no-repeat',
                border: '0px solid blue',
                width: this.options.ancho + 'px',
                height: this.options.alto + 'px',
                position: 'absolute',
                visibility: 'hidden',
                padding: '0px',
                zIndex: 1500
            },
            'class': 'moot_tipo_alex',
            html: '<div align="right" style="padding-right:10px;margin-top:2px;float:right"  id="cierraTip__' + this.options.div + '">' + this.options.bntCerrar + '</div><div style="padding:10px">' +
            '<div class="' +
            this.options.estiloInterior +
            '">' +
            this.options.html +
            '</div></div>'
        });
        if (this.options.fondo != "") {
        }
        
        if (this.options.colorFondo != "") {
            moo___tip.setStyle("background-color", this.options.colorFondo);
        }
        
        if (this.options.borde != "") {
            moo___tip.setStyle("border", this.options.borde);
        }
        moo___tip.setStyle("top", "0px");
        
        moo___tip.setOpacity(this.options.opacidad);
        
        if (!$('moo_tip__' + this.options.div)) {
            $$('body').grab(moo___tip);
        }
        
        

        $(this.options.div).addEvents({
            "mouseenter": function(e){
                e.stop();
                if (this.options.evento == "over") {
                    this.mostrar();
                }
                
                
            }.bind(this)            ,
            "mouseleave": function(){
                if (this.options.evento == "over" || this.options.forzarCierre == false) {
                    this.cerrar();
                }
            }.bind(this)            ,
            "click": function(e){
               // e.stop();
                if (this.options.evento == "click") {
                    this.mostrar();
                }
            }.bind(this)
        }).setStyle('cursor', 'pointer');
        
        $('cierraTip__' + this.options.div).addEvent("click", function(){
            this.cerrar();
        }.bind(this)).setStyle("cursor", "pointer");
        

        
        document.addEvent("click", function(){
            if (moo___tip) {
            }
        }.bind(this));
        
        
    },
    iniciar: function(){
    
    
    },
    mostrar: function(){
        if (this.options.cerrarTodos) {
            $$('.moot_tipo_alex').hide();
        }
        
        pos = $(this.options.div).getCoordinates();
        if (this.options.alinear != "") {
            switch (this.options.alinear) {
                case "izquierda":
                    miizquierdaarriba = (pos.left).toInt();
                    miizquierdaabajo = (pos.left).toInt();
                    break;
                default:
                    miizquierdaarriba = (pos.left).toInt() - (this.options.ancho / 2);
                    miizquierdaabajo = (pos.left).toInt() - ((this.options.ancho - pos.width) / 2).toInt();
            }
            
        }
        switch (this.options.posicion) {
            case "arriba":
                $('moo_tip__' + this.options.div).setStyles({
                    'left': miizquierdaarriba,
                    'top': (pos.top) - this.options.alto - 10
                }).morph({
                    'top': [$('moo_tip__' + this.options.div).getStyle("top"), (pos.top).toInt() - this.options.alto]
                });
                break;
                
            case "abajo":
                $('moo_tip__' + this.options.div).setStyle('left', miizquierdaabajo).morph({
                    'top': [(pos.top).toInt() + pos.height + 10, (pos.top).toInt() + pos.height]
                });
                break;
            case "centroArriba":
                $('moo_tip__' + this.options.div).setStyles({
					'left': miizquierdaarriba + $(this.options.div).getStyle("width").toInt() / 2  + this.options.offsetX,
					'top': pos.top - this.options.alto + this.options.offsetY
                })
				.morph({
                    'top': [(pos.top - this.options.alto) - 10, (pos.top).toInt() - this.options.alto + this.options.offsetY]
                });
            break;
			
			case "personalizado":
                $('moo_tip__' + this.options.div)
				.setStyle('left', this.options.left).morph({
                    'top': this.options.top
                });
            break;
        }
        $('moo_tip__' + this.options.div).show();
    
    },
    cerrar: function(){
        if ($('moo_tip__' + this.options.div)) {
            $('moo_tip__' + this.options.div).hide();
    
        }
    }
});