$(function () {
  
  jQuery(document).ready(function($) {
    jQuery('.twitterPopup').each(function () {
      // options
      var distance = 10;
      var time = 250;
      var hideDelay = 500;
  
      var hideDelayTimer = null;
  
      // tracker
      var beingShown = false;
      var shown = false;
      
      var trigger = $('.trigger', this);
      var popup = $('.popup', this).css('opacity', 0);
  
      // set the mouseover and mouseout on both element
      $([trigger.get(0), popup.get(0)]).mouseover(function () {
        // stops the hide event if we move from the trigger to the popup element
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
  
        // don't trigger the animation again if we're being shown, or already visible
        if (beingShown || shown) {
          return;
        } else {
          beingShown = true;
  
          // reset position of popup box
          popup.css({
            top: -110,
            left: -50,
            display: 'block' // brings the popup back in to view
          })
  
          // (we're using chaining on the popup) now animate it's opacity and position
          .animate({
            top: '-=' + distance + 'px',
            opacity: 1
          }, time, 'swing', function() {
            // once the animation is complete, set the tracker variables
            beingShown = false;
            shown = true;
          });
        }
      }).mouseout(function () {
        // reset the timer if we get fired again - avoids double animations
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        
        // store the timer so that it can be cleared in the mouseover if required
        hideDelayTimer = setTimeout(function () {
          hideDelayTimer = null;
          popup.animate({
            top: '-=' + distance + 'px',
            opacity: 0
          }, time, 'swing', function () {
            // once the animate is complete, set the tracker variables
            shown = false;
            // hide the popup entirely after the effect (opacity alone doesn't do the job)
            popup.css('display', 'none');
          });
        }, hideDelay);
      });
    });
  });
});