Event.observe(window, 'load', function() {
    tooltip.init();
});

var tooltip =
{
    xOffset: 0,
    yOffset: 20,

    init: function() {
        $$('.tooltipped').each(function(element) {
            if($('tooltipContent-' + element.id.split('-')[1])) {
                Event.observe(element, 'mouseover', this.mouseover.bindAsEventListener(this), true);
                Event.observe(element, 'mouseout', this.mouseout.bindAsEventListener(this), true);
                element.tooltip = $('tooltipContent-' + element.id.split('-')[1]) . innerHTML;
            }
        }.bind(this));
    },

    mouseover: function(event) {
        while ($('tooltip')) {
            Element.remove('tooltip');
        }
        var element = Event.element(event);
        while (element.parentNode && !Element.hasClassName(element, 'tooltipped')) {
            element = element.parentNode;
        }
        new Insertion.Top($$('body')[0], '<div id="tooltip" style="position:absolute;display:none;">' + element.tooltip + '</div>');
        Event.observe(element, 'mousemove', this.mousemove.bindAsEventListener(this), true);
        this.mousemove(event, true);
    },

    mousemove: function(event, appear) {
        var tooltip = $('tooltip');
        if (tooltip) {
            tooltip.style.left = (Event.pointerX(event) + this.xOffset) + 'px';
            tooltip.style.top = (Event.pointerY(event) + this.yOffset) + 'px';
            if(appear) {
                Element.show(tooltip);
            }
        }
    },

    mouseout: function(event) {
        var tooltip = $('tooltip');
        if (tooltip) {
            Element.hide(tooltip);
        }
    }
};