Hotels = {
	
	init : function()
	{
		var auto = new Autocomplete($('place-search'), $('place-search-id'), '/_autocomplete/hotel-locations/0/');
	}
	
}	

var Autocomplete = new Class({
	
	index : [],
	
	initialize : function(text_el, hidden_el, base)
	{
		hidden_el = hidden_el || null;
		this.base = base;
	
		// Data cache
		this.cache = new Hash();
		
		// Dimensions of input element
		var coords = text_el.getCoordinates();
		
		// Turn off autocomplete
		text_el.set('autocomplete', "off");
		
		// Suggestion div
		var popup_el = new Element('div', {
			'class' : 'sparks-ui-autocomplete-suggestions',
			'styles' : {
				'position' : 'absolute',
				'top': coords.top+coords.height,
				'left': coords.left,
				'width': coords.width,
				'display' : 'none'
			}
		});
		var output_el = new Element('div');
		popup_el.appendChild(output_el);
		document.body.appendChild(popup_el);
		
		this.els = {
			'text' : text_el,
			'output' : output_el,
			'popup' : popup_el,
			'hidden' : hidden_el
		};
		this.emptySuggestions('Start typing to see suggestions.')
		
		this.loadIndex();
				
		text_el.addEvent('keyup', this.textElementChanged.bind(this));
		text_el.addEvent('focus', this.textElementFocused.bind(this));
		text_el.addEvent('blur', this.textElementBlurred.bind(this));
	},
	
	setBase : function(url)
	{
		this.base = url;
	},
	
	emptySuggestions : function(message)
	{
		this.els.output.innerHTML = message;
	},
	
	textElementBlurred : function(ev)
	{		
		this.hidePopup.delay(150, this);
	},
	
	hidePopup : function()
	{
		this.els.popup.setStyle('display', 'none');
	},
	
	textElementFocused : function()
	{
		this.els.popup.setStyle('display', 'block');
		this.textElementChanged();
	},
	
	getText : function()
	{
		var text = this.els.text.value.toLowerCase().trim();
		return text;
	},
	
	textElementChanged : function()
	{
		var text = this.getText();
		if (!text) return this.emptySuggestions('Start typing to see suggestions.');
		var prefix = text.substring(0, 3);
		
		if (!this.index.contains(prefix)) return this.emptySuggestions('No matches');
		
		var url = this.base+prefix+'.tsv';
		
		this.loadSuggestions(url);
	},
	
	loadIndex : function()
	{
		this.index = [];
		var url = this.base+'index.tsv';
		Wr.util.sendRequest(url, 'get', this.indexLoaded.bind(this));
	},
	
	indexLoaded : function(data)
	{
		data = data.trim();
		this.index = data.split("\n");
	},
	
	loadSuggestions : function(url)
	{
		if (this.cache.has(url))
		{
			this.suggestionsLoaded(this.cache.get(url))
		} else {
			this.current_url = url;
			Wr.util.sendRequest(url, 'get', this.suggestionsLoaded.bind(this));
		}
	},
	
	suggestionsLoaded : function(data)
	{
		var text = this.getText();
		var filter = new RegExp(text, 'i');
		
		var url = this.current_url;
		this.cache.set(url, data);
		
		var lines = data.split("\n");
		
	 	var ul = new Element('ul');
		
		var nmatches = 0;
		
		for(var i=0;i<lines.length;i++)
		{
			var cols = lines[i].split("\t");
			if (cols.length<2) continue;
		
			var title = cols[1];
			if (!title.match(filter)) continue;
 		
			var li = new Element('li');
			li.store('value', cols[0]);
			li.store('description', title);
			li.innerHTML = '<strong>'+title+'</strong>'+cols[2];
			ul.appendChild(li);
			
			li.addEvent('click', this.suggestionClicked.bind(this));
			
			nmatches++;
			if (nmatches>=5) break;
		}
		
		if (nmatches==0) return this.emptySuggestions('No matches');
		
		this.els.output.innerHTML = '';
		this.els.output.appendChild(ul);
	},
	
	setSelectedId : function(id, text)
	{
		if (this.els.hidden) this.els.hidden.value = id;
		this.els.text.value = text;
	},
	
	suggestionClicked : function(ev)
	{
		var li = $(ev.target);
		if (li.get('tag')!='li') li = li.getParent('li');
		this.setSelectedId(li.retrieve('value'), li.retrieve('description'));
	}
});