(function($) {

    $.extend($.fn, {
        attach_tooltip: function(options) {
            var self = this, q;
            // valores por defecto
            var defaults = {
                id: 'tcktooliper',
                hidden: true,
                position: "bottom",
                relative: "object",
                width: 240,
                offset_x: 0,
                offset_y: 7,
                extra_class: "",
                body: ""
            };
            // merge de opciones
            var options = $.extend(defaults, options);
            
            // asignamos comportamiento
            this.each(function(i){
                var q = new $.attach_tooltip(this, options);
                $(this).click(function(e){
                    e.preventDefault();
                    q.show(options, $(this), e);
                });
            });
            
            // Continua la cadena
            return this;
        }
    });


    $.attach_tooltip = function(selection, options) {
        var self = selection;
        
        // creamos la capa si hace falta
        this.set_layer(options);
        
        // decidimos si lo mostramos inicialmente o no
        options.hidden != true ? '' : this.show(options, $(selection));
        
        // devolvemos el objeto
        return this;
    };
    
    $.attach_tooltip.prototype = {
        set_layer: function(options) {
            var self = this;
            // creamos la infraestructura del tooltip
            if($("#"+ options.id).length < 1) {
                var tt_iframe = document.createElement("iframe");
                tt_iframe.id = "iframe" + options.id;
                tt_iframe.className = "tooltip_iframe";
                tt_iframe.style.width = "1px";
                tt_iframe.style.height = "1px";
                
                var tt_layer = document.createElement("div");
                tt_layer.id = options.id;
                tt_layer.className = "tooltip";
                
                var tt_inner_layer = document.createElement("div");
                tt_inner_layer.className = "inner_tooltip";
                $(tt_layer).append(tt_inner_layer)
                
                var tt_inner_close = document.createElement("a");
                tt_inner_close.className = "close";
                tt_inner_close.href = "#";
                tt_inner_close.appendChild(document.createTextNode('CERRAR'))
                $(tt_layer).append(tt_inner_close)
                
                $("body").append(tt_layer);
                $(tt_layer).append(tt_iframe);
                $(tt_layer).hide();
                
                
                $(tt_inner_close).click(function(e){
	                	e.preventDefault();
                    self.close(options);
                })
            };
        },
        
        // setter de contenido
        setcontent: function(options, el, e){
            $("#"+ options.id).hide();
            $("#"+ options.id).removeClass();
            $("#"+ options.id).addClass("tooltip");
            $("#"+ options.id).addClass(options.extra_class);
            $("#"+ options.id).css("width", options.width + "px");
            $("#"+ options.id + " .inner_tooltip").html("");
            $("#"+ options.id + " .inner_tooltip").html($("#"+ options.id + " .inner_tooltip").html() + "<span class='tooltip_content'>" + options.body + "</span>");
            this.position(options, el, e);
            $("#iframe"+ options.id).width($("#"+ options.id).width() + 4);
            $("#iframe"+ options.id).height($("#"+ options.id).height() + 12);
            $("#"+ options.id).fadeIn(150);
        },
        
        // posicionar, por el momento sólo una posición
        position: function(options, el, e){
            var pos = el.coordinate();
            var adjust_x = pos.x + options.offset_x;
            var adjust_y = pos.y + el.height() + options.offset_y;
            $("#"+ options.id).css("left", adjust_x + "px");
            $("#"+ options.id).css("top", adjust_y+ "px");
        },
        
        // mostramos tooltips
        show: function(options, el, e) {
            this.setcontent(options, el, e);
        },
        
        // ocultamos tooltips
        close: function(options) {
            $("#"+ options.id).fadeOut(100, function() { $(this).remove(); });
        }
    };


})(jQuery);


// 
// Coordinate
// 
$.fn.coordinate = function(){
    e = this[0];
    var y = 0, x = 0;
    do {
        y += e.offsetTop || 0;
        x += e.offsetLeft || 0;
        e = e.offsetParent;
        if (e) {
            if(e.tagName.toLowerCase() == 'body') break;
            var p = $(e).position();
            if (p == 'relative' || p == 'absolute') break;
        }
    } while (e);
    return {x:x, y:y};
};