/* (C) 2008 YOOtheme.com, yoo_tooltip.js */

var YOOtooltip = 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,
			id: options['id']
        },
        options);
        this.open = false;
        this.trigger = $(trigger);
        this.trigger.setStyles(this.triggerstyles());
        this.tooltip = new Element('div', {
            'class': this.options.tooltipClass,
			'id': this.options.id,
            'styles': {
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'z-index': 100000,
                '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-top-arrow',
            'styles': {
                'height': 23
            }
        }).injectBefore(this.tooltip_tl);
        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+this.tooltip_m.offsetHeight+100,
                '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
        })
    }
});
YOOtooltip.implement(new Options);