//variables
var targets = $('[rel~=tooltip]').filter(':not(:input)'),
    targetsin = $('input[rel~=tooltip]'),
    targetText = false,
    targetInput = false,
    tooltip = false,
    title = false;

// bind on mouseenter/hover
targets.on('mouseenter', function() {
    targetText = $(this);
    tip = targetText.attr('title');
    tooltip = $('<div id="tooltip"></div>');
    ttip(targetText);
});

// bind on focusin/focus
targets.on('focusin', function(){
    targetInput = $(this);
    tip = targetInput.attr('title');
    tooltip = $('<div id="tooltip"></div>');
    ttip(targetInput);
});

// tooltip functions
var ttip = function(target){
//targets.bind('mouseenter', function(){

    // if no title return false
    if (!tip || tip === '')
        return false;

    //remove title attribute & create tooltip div
    target.removeAttr('title');
    tooltip.css('opacity', 0)
        .html(tip)
        .appendTo('body');

    // tooltip positioning & animate
    var init_tooltip = function() {
        if ($(window).width() < tooltip.outerWidth() * 1.5)
            tooltip.css('max-width', $(window).width() / 2);
        else
            tooltip.css('max-width', 340);

        var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
            pos_top = target.offset().top - tooltip.outerHeight() - 20;

        if (pos_left < 0) {
            pos_left = target.offset().left + target.outerWidth() / 2 - 20;
            tooltip.addClass('left');
        } else
            tooltip.removeClass('left');

        if (pos_left + tooltip.outerWidth() > $(window).width()) {
            pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
            tooltip.addClass('right');
        } else
            tooltip.removeClass('right');

        if (pos_top < 0) {
            var pos_top = target.offset().top + target.outerHeight();
            tooltip.addClass('top');
        } else
            tooltip.removeClass('top');

        tooltip.css({
                left: pos_left,
                top: pos_top
            })
            .animate({
                top: '+=10',
                opacity: 1
            }, 50);
    };

    // initiate tooltip & on resize
    init_tooltip();
    $(window).resize(init_tooltip);

    // remove tooltip
    var remove_tooltip = function() {
        tooltip.animate({
            top: '-=10',
            opacity: 0
        }, 50, function() {
            $(this).remove();
        });

        // reapply title attribute
        target.attr('title', tip);
    };


    targetText.bind('mouseleave', remove_tooltip);
    targetInput.bind('focusout', remove_tooltip);
    tooltip.bind('click', remove_tooltip);
    tooltip.bind('focusout', remove_tooltip);
};