window.addEvent('domready', function(){
	if ($('destination')) {
		var list = new Element('ul').addClass('autocomplete').setStyles({
			'position': 'absolute',
			'top': $('destination').getPosition().y + $('destination').getSize().y,
			'left': $('destination').getPosition().x,
			'width': $('destination').getSize().x - $('destination').getStyle('border-left-width').toInt() - $('destination').getStyle('border-right-width').toInt(),
			'display': 'none'
		}).inject(document.body);
		var search = new Request.JSON({
			url: '/search/destination',
			link: 'cancel',
			onComplete: function(destinations){
				if ($defined(destinations)) {
					var active = null;
					list.getElements('li').each(function(li, i){
						if (li.hasClass('active')) {
							active = li.get('text');
						}
					});
					list.empty();
					if (destinations.length > 0) {
						list.setStyle('display', 'block');
						for (var i = 0; i < destinations.length; i++) {
							var li = new Element('li').set('text', destinations[i]).addEvent('click', function(){
								$('destination').setProperty('value', this.get('text'));
								list.setStyle('display', 'none');
							}).addEvent('mouseenter', function(){
								list.getElements('li').each(function(li){
									li.removeClass('active');
								});
								this.addClass('active');
							}).inject(list);
							if (li.get('text') == active) {
								li.addClass('active');
							}
						}
					} else {
						list.setStyle('display', 'none');
					}
				}
			}.bind(this)
		});
		$('destination').setProperty('autocomplete', 'off').addEvent('keyup', function(e){
			e = new Event(e);
			if (e.key != 'up' && e.key != 'down' && e.key != 'enter') {
				if ($('destination').getProperty('value') == '') {
					list.setStyle('display', 'none');
				} else {
					search.post({
						search: JSON.encode($('destination').getProperty('value'))
					});
				}
			}
		}).addEvent('keypress', function(e){
			e = new Event(e);
			if (e.key == 'up' || e.key == 'down' || e.key == 'enter') {
				e.stop();
				var items = list.getElements('li');
				var active = null;
				items.each(function(li, i){
					if (li.hasClass('active')) {
						li.removeClass('active');
						active = i;
					}
				});
				if (e.key == 'up') {
					if (active == null) {
						active = items.length-1;
					} else {
						active = active-1;
					}
					if (active < 0) {
						active = items.length-1;
					}
				} else if (e.key == 'down') {
					if (active == null) {
						active = 0;
					} else {
						active = active+1;
					}
					if (active >= items.length) {
						active = 0;
					}
				}
				items[active].addClass('active');
				if (e.key == 'enter') {
					$('destination').setProperty('value', items[active].get('text'));
					list.setStyle('display', 'none');
				}
			}
		});
	}
});