var $autoDiv, $autoInput;
var currentSelectedResult, currentSize, autoInputLength;

var timeout;
var timeoutTime = 8000; // 8 seconds
var timedOut = true;

var searchMessage = "Search for...";

function selectKeyword(index) {
	clearSelectKeywords();
	$autoDiv.find("ul li").eq(index).addClass("hover");
}

// to clear the users selected value 
function clearSelectKeywords() {
	$autoDiv.find("ul li").each(function() {
		$(this).removeClass("hover");
	});
}

// when event is triggered this function will hide the results
function hideKeywords(localTimeout) {
	setTimeout(hideDropDown, localTimeout || timeoutTime);
}

// move the selected result up or down 
function move(direction) {
	var moveDir = (direction == "up") ? true : false;

	if (moveDir) { // up
		currentSelectedResult--;
		if (currentSelectedResult < 0) {
			currentSelectedResult = currentSize - 1;
		}
	} else { // down
		currentSelectedResult++;
		if (currentSelectedResult == currentSize) {
			currentSelectedResult = 0;
		}
	}
	
	selectKeyword(currentSelectedResult);
}

// uses $selectedLi (jQuery object) as the current selection
function selectItem($selectedLi) {
	if (!$selectedLi) return;
	// var keyword = $selectedLi.html();
	var keyword = $selectedLi.text();
	$autoInput.val(keyword);
	$autoInput.focus();
}

function hideDropDown() {
	$autoDiv.hide();
	$autoDiv.children("ul").remove();
	currentSize = 0;
	currentSelectedResult = -1;
}

// when the user presses enter in focus of the text box
// the current value which they've selected is returned 
function getCurrentKeyword() {
	var $selectedLi = $autoDiv.find("ul li").eq(currentSelectedResult);
	selectItem($selectedLi);
	hideDropDown();
}

// handles the error output 
function Error(XMLHttpRequest, textStatus, errorThrown) {
	alert(textStatus + ": " + errorThrown);
}

// handles the success output 
function Success(data, textStatus) {
	
	hideDropDown();
	currentSize = data.d.length;

	var outputHTML = $("<ul></ul>");
	if (currentSize > 0) {
		// output the values from the string array 
		for (var i = 0; i < data.d.length; i++) {
			var current = data.d[i];
			$("<li>" + current + "</li>").appendTo(outputHTML);
		}
		$autoDiv.append(outputHTML);
		
		$autoDiv.find("ul li").hover(
			function() {
				clearSelectKeywords();
				$(this).addClass("hover");
			},
			function() {
				$(this).removeClass("hover");
			}
		);
		$autoDiv.find("ul li").click(function() {
			selectItem($(this));
			hideDropDown();
		});
		
		$autoDiv.show();
		timedOut = false;
	}

}

function submitSearchForm() {
	// for search page
	if ( $("#UcSearchNoDataGrid1_btnSubmit").length > 0 ) {
		__doPostBack('UcSearchNoDataGrid1$btnSubmit','');
	}
	// side search is handled by clickButton.js
}

function prePopulateSearchField() {
	if ( $("#txtsidesearch").val() == "" ) {
		$("#txtsidesearch").val(searchMessage);
		$("#txtsidesearch").addClass("prePopulated");
	}
}

function clearSearchField() {
	if ( $("#txtsidesearch").val() == searchMessage ) {
		$("#txtsidesearch").val("");
		$("#txtsidesearch").removeClass("prePopulated");
	}
}

$(document).ready(function(){
	$autoDiv = $("<div id='autoOutput' style='display:none'></div>");
	$autoInput = $(".searchField input:text:eq(0)");
	$autoInput.attr("autocomplete", "off");
	$autoInput.after($autoDiv);
	prePopulateSearchField();
	
	$autoInput.focus(function(e) {
		clearSearchField();
	});
	
	$autoInput.blur(function(e) { 
		hideKeywords(100); 
		prePopulateSearchField();
	});
	
	$autoInput.keydown(function(e) {
		switch (e.keyCode) {
		case 38: // up arrow 
			move("up");
			break;
		case 40: // down arrow
			move("down");
			break;
		default: 
			break;
		}
	});
	
	$autoInput.keypress(function(e) {
		switch (e.keyCode) {
		case 13: // enter / return
			if (currentSelectedResult > -1) {
				getCurrentKeyword();
				return false;
			} else {
				submitSearchForm();
			}
			break;
		default:
			break;
		}
	});
	
	$autoInput.keyup(function(e) {	
		switch (e.keyCode) {
		case 38: // up arrow 
			// move("up");
			break;
		case 40: // down arrow
			// move("down");
			break;
		case 13: // enter / return
			break;
		default:
			if ( $autoInput.val().length >= 2 && $autoInput.val().length <= 50 ) {
				var keyword = $autoInput.val();
				// autoInputLength = $autoInput.val().length;
				clearTimeout(timeout);
				// add the time delay of 300 miliseconds 
				timeout = setTimeout(function() {
					// send the magic to the web service 
					// alert($autoInput.val().length + ": " + keyword);
					$.ajax({
						type: "POST",
						url: "http://www.fatcity.co.uk/fatCityAutoComplete/ac.asmx/AutoCompleteReturn",
						// url: "http://localhost/fatCityAutoComplete/ac.asmx/AutoCompleteReturn",
						data: '{"keyword" : "' + keyword.toString() + '"}',
						contentType: "application/json; charset=utf-8",
						dataType: "json",
						error: Error,
						success: Success
					});
				}, 300);
			} else {
				hideDropDown();
			}
			break;
		}
	});
	
	$autoDiv.mouseout(function() {
		if (!timedOut) {
			hideKeywords();
		}
		timedOut = true;
	});
});