CITYLIFE.suggester = function() {
	Event.observe(window, "load", function(){
		if($("venue_search_form_what") != null) setupListeners();
		if($("cinema") != null) setupCinemaSearch();
	});
	
	var suggestBoxes = new Array();
	
	var ver = CITYLIFE.utilities.getInternetExplorerVersion();
	var useShim = false;
	if(ver > 0 && ver < 7){
		useShim = true;
	}
	
	function setupListeners(){
		var active = null;
		var previous_results;
		
		//Create suggester divs for the main search fields
		var suggester1 = new Element('div', { 'class': 'off suggester' });
		var suggester2 = new Element('div', { 'class': 'off suggester' });
		$("venue_search_form_what").parentNode.appendChild(suggester1);
		$("venue_search_form_where").parentNode.appendChild(suggester2);
		
		//Enable submit button on form
		Event.observe($('submit'), 'mousedown', function(){ $('venue_search_form').submit(); });
		Event.observe($('submit'), 'keydown', function(event){ if(event.keyCode == 13)	$('venue_search_form').submit(); });
		
		//These detect when the enter key is pressed inside the what and where field
		Event.observe("venue_search_form_what", 'keydown', function(event){ inputKeyDown(event, Event.element(event));	});
		Event.observe($("venue_search_form_where").id, 'keydown', function(event){ inputKeyDown(event, Event.element(event)); });
		
		//Detect when the keys are being pressed, passing in cuisine and category results for restaurants and home
		Event.observe($("venue_search_form_what").id, 'keyup', function(event){
			if($('restaurants') != null) {
				var results = new Array("African","American","Argentinian","Armenian","Bangladeshi","Belgian","Bistro","Caribbean","Chinese","Cuban","Dutch","French","Greek","Indian","Irish","Italian","Italian/American","Japanese","Korean","Kosher","Kurdish","Lebanese","Malaysian","Mediterranean","Mexican","Middle Eastern","Modern British","Modern European","Nepalese","Pan-Asian","Persian","Portugese","Pub Food","Seafood","Spanish","Speciality","Steakhouse","Syrian","Thai","Traditional","Turkish","Vegetarian");
			}
			if($('home') != null) {
				var results = new Array("Music","Theatre & Dance","Cinema","Clubs","Days Out","Comedy","Gay & Lesbian","Arts","Kids","Family","Rock & Pop","Jazz","Folk & Blues","Theatre","Opera","Ballet","Dance","Classical Music","Pubs and Bars","Restaurants");
			}
			if($('pubs_and_bars') == null) inputKeyUp(event, Event.element(event),results);
		});
		Event.observe($("venue_search_form_where").id, 'keyup', function(event){
			inputKeyUp(event, Event.element(event));
		});
		
		//inputKeyDown checks if the enter key is pressed
		function inputKeyDown(event,element){
			var suggester = element.next();			
			
			if(event.keyCode == 13){
				if(active == null) {//if the autocomplete box isn't onscreen then submit form
					$('venue_search_form').submit(); 
				} 
				
				if(active != null){//if it is then populate the box with the current selection
					element.value = $(active.id).innerHTML;
					element.value = element.value.replace("&amp;","&");
					suggester.innerHTML = "";
					active = null;
					element.focus();
				}
			}
		}
		
		//inputKeyUp checks if a set of hardcoded results (cuisines and categories) are passed through, if so they are sent to displayResults
		//If no results are passed through it does either a venue or location ajax search and passes these results to displayResults
		function inputKeyUp(event,element,results){
			var suggester = element.next();	
			
			if(!event) var event = window.event;
			if(suggester.innerHTML == "" || $$('.activelink').length == 0) active = null;
			
			clearAllSuggesters();
			
			if(results != null || element.value.length > 2){
				if(event.keyCode == 40 || event.keyCode == 38){//If the key pressed is down or up just display the results
					displayResults(previous_results, event, element);
				}
				else{
					if(results == null){//No hardcoded results passed in
						var search_url = "";
						var callback;
						if(element.id == "venue_search_form_what") {//Do venue search
							search_url = '/'+$$('body')[0].id+'/event_venue_suggest?name='+element.value;
							callback = function(transport){
								var response = eval("(" + transport.responseText + ")");
								if(response.success){
								  suggester.innerHTML = "";
								  displayResults(response.venue_names,event,element);
								}
							}
						}
						else{//Do location search
							search_url = '/geo_proxy/json?max_results=5&search_term='+element.value+'&parent_location=18235';
							callback = function(transport){
								var response = eval("(" + transport.responseText + ")");
								if(response.success){
								  suggester.innerHTML = "";
								  var locations = new Array;
								  for(var i=0;i<response.result.length;i++){
									  locations[i] = response.result[i].name;
								  }
								  displayResults(locations,event,element);
								}
							}
						}
						
						new Ajax.Request(search_url, {
						  onSuccess: callback
						});
					}
					else{//Display hardcoded results
						displayResults(results,event,element)
					}
				}
			}
		}
		
		function displayResults(results,event,element){
			var suggester = element.next();	
			
			previous_results = results;
			if(element.value != ""){
				for(var i=0;i<results.length;i++){//Go over the results and populate the dropdown
					var result = results[i].toLowerCase();
					if(result.indexOf(element.value.toLowerCase()) == 0){
						suggester.className = "on suggester";
						var suggestion = new Element('a', { 'id': 'suggestion'+i, 'class': 'suggestion', 'onclick': 'return false;' }).update(results[i]);
						suggester.appendChild(suggestion);
						
						Event.observe(suggestion, 'click', function(e){//If a suggestion is clicked on then populate the input box
							element.value = Event.element(e).innerHTML;
							element.value = element.value.replace("&amp;","&");
							suggester.className = "off suggester";
						});
					}
				}
				
				if(suggester.firstChild != null){
					//down key
					if(event.keyCode == 40){//If down is pressed then move highlighted suggestion down
						if(active != null){
							if($(active.id).next() != null){
								$(active.id).className = "suggestion";
								$(active.id).next().className = "suggestion activelink";
								active = $(active.id).next();
							}
							else{
								$(active.id).className = "suggestion activelink";
							}
						}
						else{
							active = suggester.firstChild;
							suggester.firstChild.className = "suggestion activelink";
						}
					}
					
					//up key
					if(event.keyCode == 38){//If up is pressed then move highlighted suggestion up
						if(active != null){
							if($(active.id).previous() != null){
								$(active.id).className = "suggestion";
								$(active.id).previous().className = "suggestion activelink";
								active = $(active.id).previous();
							}
							else{
								$(active.id).className = "suggestion";
								active = null;
							}
						}
					}
					
					if(event.keyCode == 13){//If enter is pressed then hide suggester box
						suggester.className = "off suggester";
						active = null;
					}
				}
			}
		}		
	}
	
	function clearAllSuggesters(){
		var suggesters = $$('.suggester');
		for(var i=0;i<suggesters.length;i++){
			suggesters[i].innerHTML = "";
			suggesters[i].className = "off suggester";
		}
	}
	
	function setupCinemaSearch(){
		Event.observe($('submit'), 'click', function(){
			$('venue_search_form').submit();
		});
				
		Event.observe('cinema_search_form_cinema', 'change', function(event){//If a cinema is chosen then pull back the films on there
			var cinema_id = Event.element(event).value;
			
			if(cinema_id == ""){
				var url = '/cinema/cinema_list_json?film_id=';
				var target = 'cinema_search_form_cinema';
				var topval = 'All'
				doFilter(url,target,topval);
			}
			
			var url = '/cinema/film_list_json?cinema_id='+cinema_id;
			var target = 'cinema_search_form_film';
			var topval = 'Select a film'
			doFilter(url,target,topval);
		});
		
		Event.observe('cinema_search_form_film', 'change', function(event){//If a film is chosen then pull back the cinemas showing it
			var film_id = Event.element(event).value;
			
			if(film_id == ""){
				var url = '/cinema/film_list_json?cinema_id=';
				var target = 'cinema_search_form_film';
				var topval = 'Select a film'
				doFilter(url,target,topval);
			}
			
			var url = '/cinema/cinema_list_json?film_id='+film_id;
			var target = 'cinema_search_form_cinema';
			var topval = 'All'
			doFilter(url,target,topval);
		});
		
		function doFilter(url,target,topval){
			
			new Ajax.Request(url, {
				onSuccess: function(transport){
					var previous_key = $(target).value;
					
					$(target).innerHTML = "";
					var option = new Element('option', { 'value':'' }).update(topval);
					$(target).appendChild(option);
					
					var response = eval("(" + transport.responseText + ")");
					
					var list = "";
					if(url.indexOf('cinema_list_json') > -1) { list = response.cinemas; }
					else if(url.indexOf('film_list_json') > -1) { list = response.films; }
					
					for(var i=0;i<list.length;i++){
						for(var key in list[i]){
							$(target).appendChild(new Element('option', { 'value':key }).update(list[i][key]));
							if(key == previous_key) $(target).value = previous_key;
						}
					}
				}
			});
		}
	}

	return{
		setupListeners:setupListeners
	}
}();