/**
 * @author qmmr
 * based on the tutorial from nettuts
 * http://bit.ly/dmsD5c
 * 
 * navigation hilites li that has id="current"
 * it needs to be setup using
 * $("#nav").hilite_nav(options);
 * 
 */

(function($){

    $.fn.hilite_nav = function(options) {
		
    	options = $.extend({
	        overlap: 15,
	        speedIn: 1000,
			speedOut: 500,
	        reset: 1500,
	        color: '#333',
	        easingIn: 'easeOutExpo',
			easingOut: 'easeOutSine'
	    }, options);
	    
	    return this.each(function(){
	    
	        var nav = $(this), currentPageItem = $("#current", nav), hilite, reset;
	        
	        $('<li id="hilite"></li>').css({
				
	            width: currentPageItem.outerWidth(),
	            height: currentPageItem.outerHeight() + options.overlap,
	            left: currentPageItem.position().left,
	            top: currentPageItem.position().top - options.overlap / 2,
	            backgroundColor: options.color
				
	        }).appendTo(this);
			   
		    // reference the hilite in nav (so that we don't search whole DOM)
		    hilite = $('#hilite', nav);
		    
		    // now we listen for the hover over li element (excluding hilite li!)
		    $('li:not(#hilite)', nav).hover(function(){
				
		        // mouse over
		        clearTimeout(reset);
		        hilite.animate({
		        
		            left: $(this).position().left,
		            width: $(this).width()
		        
		        }, {
		            duration: options.speedIn,
		            easing: options.easingIn,
		            queue: false
		        });
		        
		    }, function() {
		        // mouse out
		        reset = setTimeout(function() {
		        
		            hilite.animate({
		            
		                width: currentPageItem.outerWidth(),
		                left: currentPageItem.position().left
		            
		            }, 
					{
						duration: options.speedOut,
						easing: options.easingOut
					});
		            
		        }, options.reset);
		        
		    });
			
		}); // end this.each
		
    }; // end hilite_nav
    
})(jQuery);