var time = null;

// Clicking on the whole box focus input
$(".search-field").click(function(e){
   $(".search-field-input").focus(); 
});
// On focus, remove placeholder and add class to expand input size
$(".search-field-input.empty").focus(function(e){
	$(this).removeAttr("placeholder").closest('.search-field').addClass("focus"); 
});
// On blur, recover placeholder and remove class to collapse input size
$(".search-field-input.empty").blur(function(e){ 
	$(this).attr("placeholder",$(this).data('placeholder')).closest('.search-field').removeClass("focus"); 
});
// On typping, add class if there is value to keep expanded
$(".search-field-input").keyup(function(e){
	if($(this).val() != ""){
		$(this).addClass("full-width"); 
	} else {
		$(this).removeClass("full-width"); }
});

// Click on the magnify toggles input box, hidding menu content
$("#nav-search-input").click(function(e){
	showSearch();
});

// Click on close, or other places on the view, returns original state
$("#nav-search-close").click(function(e){
	$("#searchBoxNav").animate({width: 0}, 300, 'swing', function(){
		$("#nav-overlay").removeClass("onSearch");			       
		$(".header-logo-img").css("opacity",1);
	});
});

$(document).click(function(e){
	if($(e.target).closest(".nav-search-field").length == 0 && $("#nav-overlay").hasClass("onSearch")){
		$("#searchBoxNav").blur().animate({width: 0}, 300, 'swing', function(){
			$("#nav-overlay").removeClass("onSearch");			       
			$(".header-logo-img").css("opacity",1);
		});
	}
});

// Recalculate search input width on resize 
$(window).resize(function(e){
	if($("#nav-overlay").hasClass("onSearch")){
		if(time != null){
			clearTimeout(time);
		}
		var time = setTimeout(function(){
			inputWidth = $(window).innerWidth() - 113; //magnify icon + padding offset
			$("#searchBoxNav").clearQueue().finish(function(){
			}).animate({width:inputWidth}, 250).focus();
		},180);
	}
});

$("#nav-overlay").ready(function(e){
	$nav = $("#nav-overlay");
	if($nav.data('termsearch')){
		showSearch();
	}
});

function showSearch(){
	if($("#nav-overlay").hasClass("onSearch")){
	  return;
	}

	$(".header-logo-img").css("opacity",0);
	$("#nav-overlay").addClass("onSearch");

	inputWidth = $(window).innerWidth() - 113; //magnify icon + padding offset
	$("#searchBoxNav").animate({width:inputWidth}, 300).focus();
}