var ToolTip = new Class({
    initialize: function (options) {
        this.options = Object.extend({
            tipper: null,
            message: null,
            ajax: null,
            ToolTipClass: 'ToolTips',
            followMouse: false,
            sticky: false,
            fromTop: 0,
            fromLeft: -100,
            duration: 300,
            fadeDistance: 20
        },
        options || {});
        if (!$(this.options.tipper)) return;
        this.el = $(this.options.tipper);
        this.start();
        this.visible = 0
    },
    start: function () {
        this.createContainer();
        this.header.setHTML(this.el.title);
        this.el.set({
            'title': ''
        });
        if (!this.options.ajax) {
            this.message.setHTML(this.options.message)
        } else {
            this.message.removeClass('message');
            this.message.addClass('message_loading');
            new Ajax(this.options.ajax, {
                method: 'get',
                onComplete: function () {
                    this.message.removeClass('message_loading');
                    this.message.addClass('message')
                }.bind(this),
                update: this.message
            }).request()
        }
        this.fx = new Fx.Styles(this.container, {
            duration: this.options.duration,
            wait: false,
            transition: Fx.Transitions.Sine.easeOut
        });
        this.el.addEvent(this.options.followMouse ? 'mousemove' : 'mouseenter', this.showToolTip.bind(this));
        if (!this.options.sticky) this.el.addEvent('mouseleave', this.hideToolTip.bind(this));
        else {
            this.closeTip = new Element('a').set({
                'class': 'sticky_close',
                'href': '#'
            }).setStyles({
                'position': 'absolute',
                'top': 3,
                'right': 3
            });
            this.closeTip.injectInside(this.header);
            this.closeTip.addEvent('click', this.hideToolTip.bind(this))
        }
    },
    showToolTip: function (event) {
        var event = new Event(event);
        this.elemHeight = this.options.followMouse ? 0 : this.el.getCoordinates().height;
        this.top = this.options.followMouse ? event.client.y : this.el.getPosition().y;
        var left = this.options.followMouse ? event.client.x : this.el.getPosition().x;
        var top_dist = this.visible == 1 ? this.top + this.options.fromTop + this.elemHeight : this.top + this.options.fromTop + this.elemHeight + this.options.fadeDistance;
        this.container.setStyles({
            'top': top_dist,
            'left': left + this.options.fromLeft,
            'display': 'block',
            'z-index': '110000'
        });
        this.fx.start({
            'opacity': 1,
            'top': this.top + this.options.fromTop + this.elemHeight
        });
        this.visible = 1
    },
    hideToolTip: function (event) {
        new Event(event).stop();
        this.container.setStyles({
            'z-index': '100000'
        });
        this.fx.start({
            'opacity': 0,
            'top': this.top + this.options.fromTop + this.elemHeight + this.options.fadeDistance
        });
        this.visible = 0
    },
    createContainer: function () {
        this.container = new Element('div').set({
            'class': this.options.ToolTipClass
        }).setStyles({
            'position': 'absolute',
            'opacity': 0,
            'display': 'none',
            'z-index': '100000'
        }).injectInside(document.body);
        this.header = new Element('div').set({
            'class': 'top'
        });
        this.message = new Element('div').set({
            'class': 'message'
        });
        this.footer = new Element('div').set({
            'class': 'footer'
        });
        this.container.adopt(this.header, this.message, this.footer)
    },
    alert: function (message) {
        $('debug').innerHTML += '<br>' + message
    }
});