// JavaScript Document
(function($) {
  $.fn.cuda = function() {
  return $(this).each(function () {
    // options
	this.options 		=	{
   		distance		:	10,
   		time			:	250,
    	hideDelay		:	500,

    	hideDelayTimer	:	null,

	// css
	
		css_top			: 120,
		css_left		: -5,
		
	//tracker
		trigger_class	: '.trigger',
		popup_class		: '.popup'
	};
    // tracker
	
	var distance		=	this.options.distance;
	var time			=	this.options.time;
	var	hideDelay		=	this.options.hideDelay;
	var hideDelayTimer	=	this.options.hideDelayTimer;
	
	var css_top			=	this.options.css_top;
	var css_left		=	this.options.css_left;
	
	var	trigger_class	=	this.options.trigger_class;
	var popup_class		=	this.options.popup_class;
	
	
    var	beingShown		=	false;
    var	shown			=	false;
    
    var	trigger			=	$(trigger_class, this);
    var	popup			=	$(popup_class, 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: css_top,
          left: css_left,
          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);
    });
  });
  }
})(jQuery);