/* adapted from tutorial by Jeffrey Way at Nettuts
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/

call it like this:
$('#nav').spasticNav();

if you want to pass in options, call it like this:
$('#nav').spasticNav({
	spaceFromBottom : 2,
	height : 7,
	speed : 500,
	reset : 1500,
	color : '#048e04',
	easing : 'easeOutExpo'
});
*/
(function($) {
	$.fn.spasticNav = function(options) {
		
		// create our configuration options
		options = $.extend({
			spaceFromBottom : 2,
			height : 7,
			speed : 500,
			reset : 1500,
			color : '#048e04',
			easing : 'easeOutExpo'
		}, options);
		
		// iterate over each item in the wrapped set
		return this.each(function() {
			// declare our variables now
			var nav = $(this),
				currentPageItem = $('.current', nav),
				blob,
				reset; // reset stores a reference to our setTimeout function
				
			// the blob
			$('<li id="blob"></li>').css({
				width : currentPageItem.outerWidth(),
				height	: options.height,
				left : currentPageItem.position().left,
				top : currentPageItem.outerHeight() - options.spaceFromBottom,
				backgroundColor : options.color,
				borderBottom : 'none'
			}).appendTo(this);	
			
			// call the blob that we initialized above
			blob = $('#blob', nav);
			
			// the mouse hover event
			$('li:not(#blob)', nav).hover(function() {
				// mouse over
				clearTimeout(reset);
				blob.animate(
					{
						left : $(this).position().left,
						width : $(this).width()
					},
					{
						duration : options.speed,
						easing : options.easing,
						queue : false
					}
				);
			}, function() {
				// mouse out
				reset = setTimeout(function() {
					blob.animate({
						width : currentPageItem.outerWidth(),
						left : currentPageItem.position().left
					}, options.speed)
				}, options.reset);
			
			});
		}); // end .each
	};
})(jQuery);