$(document).ready(function(){
    
    $(".mainsearch").AjaxSearch();
    $(".innersearch").AjaxSearch();
});

(function ($) {

    $.fn.AjaxSearch = function () {

    	return this.each(function() {
        	
    		var SearchBox = $(this).children('input[name=query]');
        	var SearchUrl = $(this).attr("action");
        	
        	$(this).submit(function(){ return false;});
    		new $.setAjaxSearch(SearchBox, SearchUrl);

		});
    }
})(jQuery);

$.setAjaxSearch = function (SearchBox, searchUrl) {

	var result_Count   =  0;
	var result_Selected = -1;
	var delay = 150;
	var searchPage = null;
	var lastSearchWord = '';

	var txtSearchBox = null;
	
	// initialize vars
    searchPage = searchUrl;
    
	// register mostly used vars
    var txtSearchBox = $(SearchBox);
    var inputSearchBox = $(SearchBox);
    
	// create the results div
    var divResults  = createResultsDiv();
	
	// on click
	txtSearchBox.click(function (e) {
		lastSearchWord = txtSearchBox.val();
		updateResults();
		//alert('click on txtSearchBox');
		
	});
	
	// on key up listener
	txtSearchBox.keyup(function (e) {
	    lastSearchWord = txtSearchBox.val();
	    
	    // get keyCode (window.event is for IE)
	    
	    var keyCode = e.keyCode;// || window.event.keyCode;

	    // check for an ENTER 
	    if (keyCode == 13) {
	        OnEnterClick();
	        return;
	    }

	    // check an treat up and down arrows
	    if (OnUpDownClick(keyCode)) {
	    	return;
	    }

	    // check for an ESC
	    if (keyCode == 27) {
	        clearResults();
	        return;
	    }

	    // if is text, call with delay
	    setTimeout(function () { updateResults(); }, delay);

	    
	});
	function clearResults(){
	
		divResults.css("display", "none");
		return true;
	}
	// create the results div accordingly to the search field
	function createResultsDiv() {

	    //  create the div results
		divResults = $("<div class=divAutoCompleteResults />");
	    $("body").append(divResults);

		// get the field position
		var searchBox_Position    = txtSearchBox.offset();
		var searchBox_Top    = searchBox_Position.top;
		var searchBox_Left   = searchBox_Position.left;

		// get the field size
		var searchBox_Height = txtSearchBox.height();
		var searchBox_Width  = txtSearchBox.width();

		// apply the css styles - optimized for Firefox
		divResults.css("position","absolute");
		divResults.css("left", searchBox_Left - 2);
		divResults.css("top", searchBox_Top + searchBox_Height );
		divResults.css("width", searchBox_Width - 2);
		divResults.css("z-index","2");
		
		return divResults;
	}
	
	// treat the auto-complete action (delayed function)
	function updateResults()
	{
		// get the field value

		var searchWord = txtSearchBox.val();

		//console.log(searchWord);

		// if it's empty clear the resuts box and return
		if(searchWord == ''){
			divResults.hide();
			return;
		}

		// if it's equal the value from the time of the call, allow
		if(lastSearchWord != searchWord || searchWord.length < 2){
			divResults.empty();
	       	divResults.append('<div>Введите более 2-ух символов</div>');
			divResults.css("display", "block");
			
			return;
		}
		
		$.ajax({
		    type: "POST",
		    //ToDo: relative url
		    url: searchPage,
		    data: inputSearchBox.attr('name') + "=" + searchWord,
		    cache: false,
		    dataType: "json",
		    success: function (response) {

		        // get the total of results
		        //inputSearchBox.css("background", "#ffffff url(/media/i/bg-search.gif) no-repeat 5px 6px");
		        divResults.empty();
				var size = 0;

				for(var id in response){
					divResults.append('<div><a href="'+response[id]['vlink']+'">' + response[id]['dream'] +(response[id]['theme']? ' (' + response[id]['theme'] + ')':'') + '</a></div>');
					size++;
				}

		        if(size > 0){
		        	divResults.children().each(function(){
		        		$(this).click(function(){
		        			window.location = $(this).children('a').attr('href');
		        			return false;
		        		});
		        	});
		            divResults.highlight(searchWord);
		            divResults.css("display", "block");

		        }else{
		        	divResults.append('<div>Ничего не найдено</div>');
					divResults.css("display", "block");
					//clearResults();
		        }
		        
		    }
		});
	}
	
	// on blur listener
	txtSearchBox.blur(function(){

		if(divResults.is(':hover')){
			
		}else{
			divResults.hide();
		}

	});

	// treat up and down key strokes defining the next selected element
	function OnUpDownClick(keyCode) {
		if(keyCode == 40 || keyCode == 38){

			if(keyCode == 38){ // keyUp
				if(result_Selected == 0 || result_Selected == -1){
					result_Selected = result_Count-1;
				}else{
					result_Selected--;
				}
			} else { // keyDown
				if(result_Selected == result_Count-1){
					result_Selected = 0;
				}else {
					result_Selected++;
				}
			}

			// loop through each result div applying the correct style
			divResults.children().each(function(i){
			    if (i == result_Selected) {
			        txtSearchBox.val($(this).text());
					this.className = "selected";
				} else {
					this.className = "unselected";
				}
			});

			return true;
		} else {
			// reset
			result_Selected = -1;
			return false;
		}
	}
	function OnEnterClick() {
	    
		divResults.children().each(function (i) {
	        if (i == result_Selected) {
		        window.location = $(this).children('a').attr('href');
	        }
	    });
		
		//divResults.hide();
		return;
	}
}