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: 200,
            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"
        })).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"
        })).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);
		this.tooltip_m.innerHTML = content;
        this.tooltip_bl = (new Element("div", {
            "class": "tooltip-bl"
        })).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,
            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);