var ToolTip = new Class({
    initialize: function(trigger, content, options) {
        this.setOptions({
            duration: 300,
            transition: Fx.Transitions.linear,
            wait: false,
            tooltipClass: "yoo-tooltip",
            style: "default",
            width: 250,
            display: "inline",
            mode: "cursor",
            sticky: 0
        },
        options);
        this.open = false;
        this.trigger = $(trigger);
        this.trigger.setStyles(this.triggerstyles());
        this.tooltip = (new Element("div", {
            'class': this.options.tooltipClass,
            styles: {
                position: "absolute",
                top: 0,
                left: 0,
                'z-index': 10,
                visibility: "hidden",
                width: this.options.width
            }
        })).injectTop(document.body);
        this.tooltip_style = (new Element("div", {
            'class': this.options.style
        })).injectInside(this.tooltip);
        this.tooltip_tl = (new Element("div", {
            'class': "tooltip-tl",
            styles: {
                width: this.options.width
            }
        })).injectInside(this.tooltip_style);
        this.tooltip_tr = (new Element("div", {
            'class': "tooltip-tr"
        })).injectInside(this.tooltip_tl);
        this.tooltip_t = (new Element("div", {
            'class': "tooltip-t",
            styles: {
                height: 15
            }
        })).injectInside(this.tooltip_tr);
        this.tooltip_l = (new Element("div", {
            'class': "tooltip-l",
            styles: {
                width: this.options.width
            }
        })).injectAfter(this.tooltip_tl);
        this.tooltip_r = (new Element("div", {
            'class': "tooltip-r"
        })).injectInside(this.tooltip_l);
        this.tooltip_m = (new Element("div", {
            'class': "tooltip-m"
        })).injectInside(this.tooltip_r).set('html',content);
        this.tooltip_bl = (new Element("div", {
            'class': "tooltip-bl",
            styles: {
                width: this.options.width
            }
        })).injectAfter(this.tooltip_l);
        this.tooltip_br = (new Element("div", {
            'class': "tooltip-br"
        })).injectInside(this.tooltip_bl);
        this.tooltip_b = (new Element("div", {
            'class': "tooltip-b"
        })).injectInside(this.tooltip_br);
        this.tooltip_arrow = (new Element("div", {
            'class': "tooltip-arrow",
            styles: {
                height: 23
            }
        })).injectInside(this.tooltip_b);
        if (this.options.sticky) {
            this.close = (new Element("div", {
                'class': "tooltip-close"
            })).injectInside(this.tooltip_tl);
        }
		
        this.fx = new(Fx.Morph)(this.tooltip, this.options);
        this.trigger.addEvent("mouseenter", this.show.bindWithEvent(this));
        if (this.options.sticky) {
            this.close.addEvent("mouseenter", this.hide.bindWithEvent(this));
        } else {
            this.trigger.addEvent("mouseleave", this.hide.bindWithEvent(this));
        }
    },
    show: function(event) {
        if (!this.open) {
            this.pos = this.position(event);
            this.tooltip.setStyles({
                opacity: 0,
                top: this.pos.top + "px",
                left: this.pos.left + "px"
            });
            this.fx.start({
                opacity: 1,
                top: (this.pos.top - 10) + "px"
            });
            this.open = true;
        }
    },
    hide: function(event) {
        this.fx.start({
            opacity: 0,
            top: (this.pos.top - 20) + "px"
        });
        this.open = false;
    },
    position: function(event) {
        var trg = this.trigger.getCoordinates();
        var tip = this.tooltip.getCoordinates();
        if (this.options.mode == "cursor") {
            var event = new Event(event);

            trg = $extend(trg, {
                top: event.page.y,
                left: event.page.x,
                width: 0
            });
        }
        return {
            top: trg.top - tip.height + 45,
            left: trg.left - tip.width / 2 + trg.width / 2
        };
    },
    triggerstyles: function() {
        var styles = {
            display: this.options.display
        };
        if (!this.trigger.getFirst()) {
            return styles;
        }
        
		/*var first = this.trigger.getFirst().getCoordinates();
        return $extend(styles, {
            width: first.width
        });
		*/
    }
});
ToolTip.implement(new Options);