var oldKeywords = "";

function getSuggestion() {
   var suggestionDiv = $('#suggestion');
   var newKeywords = jQuery.trim(jQuery('#search_input').val());
   if (oldKeywords != newKeywords) {
      
      jQuery.get(site_url + "suggestions", {
         term : newKeywords
      }, function(data) {
        	if (data =='') {
         	suggestionDiv.html('');
         	suggestionDiv.hide();
         	return false;
        	}
      	json = JSON.parse(data);
         if (json[0].length > 0) {
         	suggestionDiv.html('');
            for (i = 0; i < json[0].length; i++) {
               word = json[0][i];
               newEl = document.createElement('div');
               $(newEl)
               	.html(word)
               	.addClass('keyWord')
               	.hover(function(){
               		$(this).addClass('current');
               	}, function(){
               		$(this).removeClass('current');
               	})
               	.click(function(){
                  	suggestionDiv.hide();
                  	$('#search_input').val($(this).text()).parents('form:eq(0)').submit();
               	});
               
               suggestionDiv.append(newEl);
            }
       		suggestionDiv.show();      
         }
      });

   }
   oldKeywords = newKeywords;
   currentIndex = -1;
   oldValue = jQuery('#search_input').val();
}

jQuery( function() {
   $('#search_input').addClass('search_input');

   if ($('#suggestion').length > 0) {
      var suggestionDiv = $('#suggestion');
   } else {
      var suggestionDiv = $(document.createElement('div'));
      suggestionDiv.attr('id', 'suggestion')
		jQuery('#search_input').before(suggestionDiv);
   }
   $(document).click(function(e){
		try { className = e.target.className} catch(err) {};
		if ($('#suggestion:visible') && (className != 'keyWord current' || className != 'search_input')) {
			suggestionDiv.hide();
		}
	});

	suggestionDiv
		.addClass('suggestionDiv hide')
		.css('width', jQuery('#search_input').width() + 'px');

	var oldValue = jQuery('#search_input').val();
   var currentIndex = -1;
   var t;
   /*jQuery('#search_input').keydown(function(event){
   	console.log(event.keyCode);
   });
   */
   jQuery('#search_input').keydown(
         function(event) {
         	clearTimeout(t);
            if ((event.keyCode == 38 || event.keyCode == 40) && $('#suggestion:visible').length == 1) {
            	if (event.keyCode == 40) {
            		if (currentIndex <= $('div', suggestionDiv).length - 2) currentIndex++
            	} else {
            		if (currentIndex >= 0) currentIndex--
            	};
            	$('div', suggestionDiv).removeClass('current');
            	if (currentIndex != -1) $('#search_input').val($('div:eq(' + currentIndex + ')', suggestionDiv).text());	
					else $('#search_input').val(oldValue);
            	
            	$('div:eq(' + currentIndex + ')', suggestionDiv).addClass('current');
            	return false;
            }
            if (event.keyCode == 13 || event.keyCode == 27) {
            	suggestionDiv.hide();
            	currentIndex = -1;
               if (event.keyCode == 13) {
            	   $('#search_input').parents('form:eq(0)').submit();
               }
            	return false;
            }
            
            t = setTimeout("getSuggestion();", 600);
            
         })     
         .attr('autocomplete', 'off');
});