$j(function () {
  $j('.bigtip').each(function () {
    /**** Options ****/
    var distance = 10; /* travel distance of the animation */
    var time = 250; /* travel time of the animation */
    var hideDelay = 100;
    var showDelay = 500;
    var hideDelayTimer = null;
    var showDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $j(this).css({
    	'position': 'relative',
    	'cursor': 'pointer'
    });
    var popup = $j('.popup', this).css('opacity', 0);
    
 	/* Auto calculate position */
 	if (popup.hasClass('right')){
 		var locationTop = -4;
 		var locationLeft = popup.width() - 50;
 	}
 	else if (popup.hasClass('below')){
 		var locationTop = $j(this).height() * 1.8;
 		var locationLeft = 0;
 		distance = distance * -1; //reverse travel direction (slide down instead of up)
 	}
 	else{ //location default is top
 		var locationTop = popup.height() * -1 - $j(this).height()*2; //Push it above the height of the element
  		var locationLeft = (popup.width() / 5.5) * -1;
 	}
 	
	function showTooltip(){
		// reset position of popup box
		beingShown = true;
		
		// Detect if protruding out of the viewpane
		// and adjust position accordingly
		var rightpos = trigger.offset().left + popup.width();
		
		//alert('Position: ' + rightpos + 'Width: ' + $j(window).width());
		
		if ( rightpos > $j(window).width() ){
			popup.css('right', 0);
			locationLeft = "auto";
		}
		
        popup.css({
          top: locationTop,
          left: locationLeft,
          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;
        });
	}
	
    // set the mouseover and mouseout on both element
    $j([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 {
        if (showDelay){ //show the toooltip after specified delay
		showDelayTimer = setTimeout(showTooltip, showDelay);
		}
		else{
			showTooltip();
		}
      }
    }).mouseout(function () {
		// reset the timer if we get fired again - avoids double animations
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		// If a timeout is set for showing the tooltip, cancel it
		if (showDelayTimer) clearTimeout(showDelayTimer);
      
	      // 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');
			}); //popup.animate
	    }, hideDelay); //setTimeout
    }); //mouseover/mouseout chain
  }); //$j('.bigtip').each
}); //$j(function () {