// helper function that switches an img's src
function setElementSrcAfterMSecs(element, src, msecs) {
	return setTimeout(function(){
		element.attr('src', src);
	}, msecs);
}
$(function(){
	var navItems  = $('#nav a');
	var navImages = $('img', navItems);
	var animating = false;
	var delayFactor = 35;
	// mouse over effect
	navItems.mouseenter(function() {
		// check if we're already animating
		if (animating)
			return;
		// set animation blocker
		animating = true;
		// set some basic variables
		var self = $(this);
		var name = self.attr('data-name');
		var base = 'img/' + name + '/';
		// now we will calculate the distance from the 'current' pane for
		// every pane and swap its image with a calculated delay (by distance)
		var selfIndex = navItems.index(self);
		for (var i = 0; i < navImages.length; i++) {
			var distance = Math.abs(selfIndex - i);
			var delay    = distance * delayFactor;
			setElementSrcAfterMSecs(navImages.eq(i),
									base + (i + 1) + '.jpg',
									delay);
		}
		// reset animation blocker
		setTimeout(function(){animating = false;}, navImages.length * delayFactor);
	});
	// mouse out effect
	$('#nav').mouseleave(function() {
		// check if we're already animating
		if (animating)
			return;
		// set animation blocker
		animating = true;
		// set some basic variables
		var lastItemIndex = navItems.length - 1;
		// delay image switching from the edges to the center
		navItems.each(function(i, e) {
			var name  = $(e).attr('data-name');
			var base  = 'img/' + name + '/';
			var delay = (i < (lastItemIndex / 2) ? i : (lastItemIndex - i)) * delayFactor;
			setElementSrcAfterMSecs(navImages.eq(i),
									base + (i + 1) + '.jpg',
									delay);
		});
		// reset animation blocker
		setTimeout(function(){animating = false;}, (lastItemIndex / 2) * delayFactor);
	});
});