(function($) {
    function tooltip(elem, conf) {
        elem = jQuery(elem);

        var tooltip = jQuery(document.createElement('div'))
                    . addClass(conf.baseClass)
                    . hide()
                    . appendTo(jQuery('body'));

        var content = jQuery(document.createElement('div'))
                    . addClass('content')
                    . html('Wird geladen...')
                    . appendTo(tooltip);

        var arrow = jQuery(document.createElement('span'))
                  . addClass('arrow')
                  . appendTo(tooltip);

        // Content laden
        var url;
        var name = elem.attr('name').split('-');
        if(name.length == 3) {
            if(name[1] == name[2]) {
                return false;
            }

            url = '/include/ajax/product_diff.php';
            url += '?product_id=' + name[2];
            url += '&compare_product_id=' + name[1];
        } else {
            url = '/include/ajax/product_info.php';
            url += '?product_id=' + name[1];
        }
        content.load(url);

        // Tooltip ein-/ausblenden
        elem.hover(
            function() { 
                tooltip.show();
                tooltip.css('top', elem.offset().top - tooltip.outerHeight() + "px");
                arrow.css('left', elem.offset().left - tooltip.offset().left + elem.innerWidth() / 2 - arrow.innerWidth() / 2 + 'px');
            },
            function() { tooltip.hide(); }
        );

        // Tooltip positionieren
        tooltip.css('top', elem.offset().top - tooltip.outerHeight() + "px");
    }

    jQuery.fn.tooltip = function(conf)
    {
        var defaultConf = {
            baseClass: 'tooltip'
        }
        jQuery.extend(defaultConf, conf);

        this.each(function() {
            var el = new tooltip(jQuery(this), defaultConf);
            jQuery(this).data("tooltip", el);
        });

        return this;
    }
})();