var originalBrandValue = '';

function prepareBrandSuggest(input_id, suggestion_id) {
	// Add the auto-suggest feature to the brand search box
	if ($(input_id)) {
		var input = $(input_id);
		var suggestions = $(suggestion_id);
		
		input.addEvent('keyup', function (event) {
			//suggestions.setStyle('display','');
			// Handle special keypresses
			if (event.code == 27) {
				// Escape: go back to what we had before using the suggestor
				suggestions.setStyle('display', 'none');
				this.value = originalBrandValue;
				return true;
			}
			if (event.code == 13 || this.value == '') {
				// Enter: hide the suggestions and leave the value in the input
				// or blank value in box
				suggestions.setStyle('display', 'none');
				return true;
			}
			if (event.code == 39 || event.code == 37) {
				return true;
			}
			if (event.code == 40) {
				// Down
				if (suggestions.getStyle('display') == 'none') return;
				var lis = suggestions.getElements('li');
				var current_li, next_li;
				// Look for the currently selected item and work out what the next one down is
				for (var i = 0; i < lis.length; i++) {
					if (lis[i].hasClass('over')) {
						current_li = lis[i];
						if (i < lis.length-1) next_li = lis[i+1];
						else next_li = lis[0];
					}
				}
				if (typeof(next_li) == 'undefined') next_li = lis[0];
				if (current_li) current_li.removeClass('over');
				next_li.addClass('over');
				this.value = next_li.getProperty('text');
				event.stop();
				return false;
			}
			if (event.code == 38) {
				// Up
				if (suggestions.getStyle('display') == 'none') return;
				var lis = suggestions.getElements('li');
				var current_li, next_li;
				for (var i = 0; i < lis.length; i++) {
					if (lis[i].hasClass('over')) {
						current_li = lis[i];
						if (i > 0) next_li = lis[i-1];
						else next_li = lis[lis.length-1];
					}
				}
				if (typeof(next_li) == 'undefined') next_li = lis[0];
				if (current_li) current_li.removeClass('over');
				next_li.addClass('over');
				this.value = next_li.getText();
				event.stop();
				return false;
			}
			// brandNames defined in /api/brands/
            var brandList = [];
            var numBrands = brandNames.length;
            var brandListSize = 0;
			// Filter the list of brands to include only those that start with the entered phrase
            for (var i=0;(i<numBrands && brandListSize<10);i++) {
                if (brandNames[i].toLowerCase().search(this.value.toLowerCase()) == 0) {
                    brandList.include(brandNames[i]);
                    brandListSize++;
                }
            }
			if (brandList.length > 0) {
				// Add all the brands to the suggestion box
				suggestions.getElements('li').each(function (el) {el.dispose();});
				var li, attrs;
				for (var i = 0; i < brandList.length; i++) {
					li = new Element('li');
					if (i == 0) li.addClass('first');
					if (i == brandList.length-1) li.addClass('last');
					li.setProperty('text', brandList[i]);
					// Set this as the current item when hovering
					li.addEvent('mouseover', function (event) {
						suggestions.getElements('li').each(function (el) {el.removeClass('over');});
						this.addClass('over');
					});
					// Unset current item when leaving
					li.addEvent('mouseout', function (event) {
						this.removeClass('over');
					});
					// Select this value when clicked
					li.addEvent('mousedown', function () {
						this.removeClass('over');
						input.value = this.getProperty('text');
					});
					li.injectInside(suggestions);
				}
				suggestions.setStyle('display', 'block');
			} else {
				suggestions.setStyle('display', 'none');
			}
		}.bindWithEvent(input));
		// Hide the suggestions when we move away from the input
		input.addEvent('blur', function () {
			suggestions.setStyle('display', 'none');
		});
	}
}

window.addEvent('domready', function() {
	prepareBrandSuggest('id_search_brand', 'brand_search_suggestions');
	prepareBrandSuggest('id_search_page_input', 'brand_search_page_suggestions');
});