if (autocompletionCharacterNumber == null || typeof (autocompletionCharacterNumber) == "undefined") {
    	autocompletionCharacterNumber = 3;
    }
    if (autocompletionResultNumber == null || typeof (autocompletionResultNumber) == "undefined") {
    	autocompletionResultNumber = 5;
    }
    
	jQuery().ready(function() {
	   jQuery("#keyWordSearch").autocomplete("", {
		minChars: autocompletionCharacterNumber,
		width: 350,
		scrollHeight: 290,
		autoFill: false,
		dataType: "json",
		max: autocompletionResultNumber,
		matchContains: false,
		highlight: false,
		highlightItem: false,
		scroll: false,
		matchSubset: false,
		selectFirst: false,
		posXOffset: -97,
		posYOffset: 12,

		async: function (term, handler) {
			autocompleteSearchAjaxController.findSuggestedProducts(term, autocompletionResultNumber, handler);
		},

		parse: function(resultData) {
			result = [];
			for (x = 0; x < resultData.length; x++) {
				result[x] = { data: resultData[x] };
			}
			return result;
		},
		// custom format function. tells widget how the results should be output
		formatItem: function(row, i, max, term) {
			var rowClass = i % 2 == 0 ? "autocomplete-even-row" : "autocomplete-odd-row";
			var productTable =
				"<div class=\"product\">" +
				"<div class=\"product-image\"><img src='" + row.image + "'/></div>" +
				"<div><a href='" + row.url + "'>" + row.name + "</a></div>" +
				"<div class=\"product-description\">" + row.description + "</div>" +
				"</div>";
/*			
				"<table cellpadding='0' cellspacing='0' border='0' width='100%' bgcolor='white'>"
				+	"<tr class='" + rowClass + "' >" 
				+		"<td width='30%' valign='top' align='right'>"
				+			"<img width='70%' height='70%' src='" + row.image + "'/>"
				+		"</td>"
				+ 		"<td align='left' valign='top'>"
				+			"<span><a href='" + row.url + "'>" + row.name + "</a></span><br/>"
				+			"<span class=\"product-description\">" + row.description + "</span>"
				+		"</td>"
//				+		"<td align='right' width='50' valign='top'><span>" + row.price + "</span></td>"
				+	"</tr>"
				+"</table>";*/
			return productTable;
		},
		// additional option for creating node in result div before the actual items
		formatBeforeItems: function(element) {
					firstLine = jQuery("<div/>").appendTo(element).addClass("autocomplete-first-line");
					firstLine.html("Products");
		},
		formatAfterItems: function(element) {  // additional option for creating node in result div after the actual items
			lastLine = jQuery("<div/>").appendTo(element).addClass("autocomplete-last-line");
			lastLine.html("<a href='#' onclick='submit$searchInputId(); return false'>View All Search Results &gt;&gt;</a>");
		},
		formatResult: function(data, value) {			
		}
	}).result(function(event, item) {     // result selection trigger when item is selected the user is redirected to url of product
		  location.href = item.url;
	});
 });

function submit$searchInputId() {
    // additional trigger for 'View All' link to launch normal search
	var suggestForm = jQuery("#keyWordSearch").parents("form");
	var formUrl = suggestForm.serialize();
	location.href = suggestForm.attr('action') + '?' + formUrl;
}