$(function() {
	var distance = 10;
	var time = 250;
	var hideDelay = 500;
	var hideDelayTimer = null;
	
	var beingShown = false;
	var shown = false;
	
	var trigger = $('#portfolio', this);
	var popup = $('#popup', this).css('opacity', 0);
	
	$([trigger.get(0), popup.get(0)]).mouseover(function() {
		if(hideDelayTimer) clearTimeout(hideDelayTimer);
		
		if(beingShown || shown)
		{
			return;
		}
		else
		{
			$('#portfolio').css('background', '#1d92cb');
			
			beingShown = true;
			// Brings popup back into position... it still has 0 opacity at this point, tho
			popup.css({ 
				top: '10px', 
				left: '294px', 
				display: 'block' 
				}	
			).animate({
				top: '-=' + distance + 'px',
				opacity: 1
			}, time, 'swing', function() {	// 'swing' is the easing type... other built-in type is 'linear'
				// Once animation is complete, set these tracking variables
				beingShown = false;
				shown = true;
			});
		}
	}).mouseout(function() {
		// Reset the timer if function gets fired again - avoids double animations
		if(hideDelayTimer) clearTimeout(hideDelayTimer);
		
		hideDelayTimer = setTimeout(function() {
			hideDelayTimer = null;
			$('#portfolio').css('background', 'none');
			popup.animate({
				top: '-=' + distance + 'px',
				opacity: 0
			}, time, 'swing', function() {
				shown = false;
				popup.css('display', 'none');
			});
		}, hideDelay);
	});
});