var searchField, searchForm,searchResultArea, ajaxContentHolder, searchSubmitButton, defaultSearchFieldText, searchLoader, ajaxLink;



$(document).ready(function(e){

	

	/* init vars */

	searchField = $('#search');		// search box input field

	searchForm = $('#searchform');	// search form

	searchResultArea = $('#searchres');	// dynamic content while loading

	ajaxContentHolder = $('#ajax_content');  // insert html answer here

	searchSubmitButton = $('#detailed_search_button');
	searchSubmitButton2 = $('#detailed_search_button_2');

	defaultSearchFieldText = $('#default_searchbox_text');

	searchLoader = $('#search_loader');

	ajaxLink = $('#ajax_link');



	// set default blur handler

	hideSearchResultsOnBlur();



	// user mouse is on search-result then remove "blur" handler from search field

	searchResultArea.live('mouseover', function(){

		notHideSearchResultsOnBlur();

	});



	// user mouse is out of search result => add default blur handler

	searchResultArea.live('mouseout', function(){

		hideSearchResultsOnBlur();

	});

	

	// "Detailed search wanted"

	searchSubmitButton.click(function(e){

		searchForm.submit();

	});

	searchSubmitButton2.click(function(e){

		searchForm.submit();

	});
	

});



// default handler + hide search results;

function hideSearchResultsOnBlur(){

	

	searchField.die().live('blur', function() {

		defaultBlurHandler(this);

		searchResultArea.hide();

	});

}



// default handler

function notHideSearchResultsOnBlur(){

	searchField.die().live('blur', function() {

		defaultBlurHandler(this);

	});

}





function defaultBlurHandler(box){

	if( box.value == '' ){

		box.value = defaultSearchFieldText.val();

	}

}



function defaultFocusHandler(box){

	if( box.value == defaultSearchFieldText.val() ){

		box.value = '';

	}	

}





function showResult( str ){

	

	ajaxContentHolder.empty();

	

	if( str.length > 3 && !searchField.hasClass('loading') ){

		

		searchResultArea.show();

		searchField.addClass('loading');

		searchLoader.show();

		

		

		$.post( ajaxLink.val() , {keyword: str}, function(data){

			 

			// loaded

			searchField.removeClass('loading');

			



			if( searchField.hasClass('changed') ){	// changed while loading

				searchField.removeClass('changed');

				showResult(searchField.val());

			}else{	// was not changed -> render data

				ajaxContentHolder.empty().html(data);

				searchLoader.hide();

			}

			

		});

		

	}else if( str.length > 3 && searchField.hasClass('loading') ){

		searchField.addClass('changed')

	}else if(searchField.hasClass('changed') && str.length < 3){

		searchField.removeClass('changed');

	}

}