/* tooltip.js */

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,
                'color': 'black',
                '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).setHTML(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.Styles(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);