// JavaScript Document
$(document).ready(function() {
	

	$("li").hover(function() {
			var itemwidth = $(this).width(); /* Getting the LI width */
			$(this).prepend("<div class='hover'></div>"); 
			$(this).find("div").fadeIn('10000').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
			$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");
			
		
		
		
		
		
	} , function() {
		$(this).find("div").slideUp('1000').fadeOut('1000');/* sliding up and fading out the hover div */
		$(this).find("div").remove();/* removing the <div> code from html at every mouseout event*/
		$(this).find("ul").fadeOut('1000'); /* fading out the sub menu */
		
	});
	
	

	$(".search-input").focus(function(){
		$(this).animate({width:'180px'}, 500); /* on focus, increasing the input width of search to left side*/
	});
	
	$(".search-input").focusout(function(){
		$(this).animate({width:'117px'}, 500);  /* on focus, decreasing the input width of search to left side*/
	});
	
	

});