(function($){  
 $.fn.lava = function(num) {  	
	//transitions
		//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
		var style = 'easeOutElastic';
		
		//Retrieve the selected item position and width
		var default_left = Math.round($('#lava'+num+' li.selected').offset().left - $('#lava'+num).offset().left);
		var default_width = $('#lava'+num+' li.selected').width();

		//Set the floating bar position and width
		$('#box'+num).css({left: default_left});
		$('#box'+num+' .head').css({width: default_width});

		//if mouseover the menu item
		$('#lava'+num+' li').hover(function () {
			
			//Get the position and width of the menu item
			left = Math.round($(this).offset().left - $('#lava'+num).offset().left);
			width = $(this).width(); 

			//Set the floating bar position, width and transition
			$('#box'+num).stop(false, true).animate({left: left},{duration:1000, easing: style});	
			$('#box'+num+' .head').stop(false, true).animate({width:width},{duration:1000, easing: style});	
		
		//if user click on the menu
		});
		
		//If the mouse leave the menu, reset the floating bar to the selected item
		$('#lava'+num).mouseleave(function () {

			//Retrieve the selected item position and width
			default_left = Math.round($('#lava'+num+' li.selected').offset().left - $('#lava'+num).offset().left);
			default_width = $('#lava'+num+' li.selected').width();
			
			//Set the floating bar position, width and transition
			$('#box'+num).stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			$('#box'+num+' .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});		
		});
		
		
    return this.each(function() {  
  
    });  
 };  
})(jQuery);