$(document).ready(function() { 
    $("#meta_nav a:contains('Abmelden')").each(function(i) { 
        var a = $(this);
        a.mouseover(function() {
            a.addClass("active");
        });
        
        a.tooltip({
            tip: 'div.userinfo',
            position: 'bottom center',
            relative: true, 
            delay: 150,
            events: {
                tooltip: 'mouseover'
            },
            onShow: function(e) {
                a.addClass("active");
            },
            onBeforeHide: function(e, i) {
                a.removeClass("active");
            }
        });
    });
});
  
function closeAcc() {
  $("div.userinfo").slideUp();
  $("#meta_nav a:contains('Abmelden')").removeClass("active");
}

$(document).mouseover(function(e) {
  var el = $(e.target)
  if ($(".userinfo:visible").length && !el.is(".userinfo") && !el.parents(".userinfo").length && !el.is("#meta_nav a:contains('Abmelden')")) {
    closeAcc();
  }
});

$(document).keydown(function(e) {
  if (e.keyCode == 27) { closeAcc(); }
}); 


//old stuff
/*
$(document).ready(function() { 
$("#meta_nav a:contains('Abmelden')").tooltip({tip: 'div.userinfo', effect: 'bouncy', position: 'bottom center', relative: true, delay: 150});
});

// create custom animation algorithm for jQuery called "bouncy" 
$.easing.bouncy = function (x, t, b, c, d) { 
var s = 1.70158; 
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
} 
 
// create custom tooltip effect for jQuery Tooltip 
$.tools.tooltip.addEffect("bouncy", 
 
// opening animation 
function(done) { 
this.getTip().animate({top: '+=10'}, 500, 'bouncy', done).show(); 
}, 
 
// closing animation 
function(done) { 
this.getTip().animate({top: '-=10'}, 500, 'bouncy', function()  { 
$(this).hide(); 
done.call(); 
}); 
} 
);
*/