var autoCompleter = new Class({
	Implements: [Events, Options],
	options: {
		timer: 	0,
		url: 	'/requests/autocompleter-locatie.php',
		limit:	10,
		icons: {
			use: true,
			loader: '/img/gif/autocompleter_loader.gif',
			reset: '/img/gif/autocompleter_reset.gif',
			error: '/img/png/autocompleter_error.png'
		},
		focus: 	{
					use: true,
					text: 'Zoeken'
				}
	},
	
	initialize: function(container, options){		
		this.setOptions(options);
		this.container = container;
		this.timer = null;
		this.selected = false;
		this.hovered = 0;
		
		if(this.options.icons.use) this.initIcon();
		this.initInput();
		this.initBox();
	},
	
	initInput: function(){
		this.container.set('autocomplete', 'off');
		if(this.container.get('value') == ''){
			this.container.set('value', this.options.focus.text);
		}else{
			this.showIcon('reset');
		}
		
		if(this.options.focus.use){
			this.container.addEvents({
				'focus': function(){
					if(this.container.get('value') == this.options.focus.text || this.container.get('value') == ''){
						this.clearInput();
					}else if(this.data != 'undefined' && this.data != null && !this.selected){
						this.setDataBox();
					}
				}.bind(this),
				'blur': function(){
					if(this.container.get('value') == ''){
						this.container.set('value', this.options.focus.text);
					}
				}.bind(this)
			});
		}
		
		this.container.addEvents({
			'keyup': function(event){
				event.stop();
				switch(event.key){
					case 'up':
						if(this.box_open) this.setHovered((this.hovered > 0?this.hovered-1:1));
						break;
					case 'down':
						if(!this.box_open && this.data != 'undefined' && this.data != null && !this.selected){
							this.openBox();
							this.setHovered(1);
						}else{
							var item = (this.hovered > 0?this.hovered+1:1);
							this.setHovered(item);
						}
						
						break;
					case 'enter':
						this.setSelected(this.items[this.hovered-1]);
					default:
						this.showIcon('loader');
						this.timerRequest();
						break;
				}
			}.bind(this)
		});
	},
		
	clearInput: function(){
		this.container.set('value', '');
		this.data = null;
	},
	
	initIcon: function(){
		this.icon = new Element('div', {
			styles: {
				'position':'absolute',
				'top': (this.container.getCoordinates().top + ((this.container.getCoordinates().height/2)-8)),
				'left': (this.container.getCoordinates().left + (this.container.getCoordinates().width - 20)),
				'width': 16,
				'height': 16,
				'cursor': 'pointer',
				'display': 'none',
				'visibility': 'hidden'
			},
			events: {
				click: function(){
					this.container.set('value', '');
					this.closeBox();
					if(this.timer) $clear(this.timer);
					this.container.focus();
				}.bind(this)
			}
		}).inject(document.body);
	},
	
	showIcon: function(icon){
		if(this.options.icons.use){
			switch(icon){
				case 'loader':
					var url = 'url('+ this.options.icons.loader +')';
					break;
				case 'reset':
					var url = 'url('+ this.options.icons.reset +')';
					break;
				case 'error':
					var url = 'url('+ this.options.icons.error +')';
					break;
				default:
					var url = 'none';
			}

			this.icon.setStyles({
				'display': 'block',
				'visibility': 'visible',
				'background': url
			});
		}
	},
	
	initBox: function(){
		this.box_open = false;
		if($$('.autocompleter-box').length == 0){
			this.box = new Element('div', {
				'class': 'autocompleter-box',
				styles: {
					display: 'none',
					visibility: 'hidden',
					position: 'absolute',
					top: 0,
					left: 0
				} 
			}).inject(document.body);
		}else{
			this.box = $$('.autocompleter-box')[0];
		}
		
		document.addEvent('mousedown', function(event) {
			var event = new Event(event);
			var target = $(event.target);
			if(target != this.box && target.getParent('div') != this.box && this.box_open && target != this.container) {
				this.closeBox();
			}
		}.bind(this));
	},
	
	openBox: function(){
		
		var coordinates = this.container.getCoordinates();
		this.box.setStyles({
			 top: 		(coordinates.bottom-this.container.getStyle('border-bottom-width').toInt()),
			 left: 		(coordinates.left+this.container.getStyle('border-left-width').toInt()),
			 width: 	(coordinates.width-this.container.extra_dimensions('x',false,true,false)),
			 display: 	'block',
			 visibility:'visible'
		});
		
		this.box_open = true;
	},
	
	closeBox: function(){
		var coordinates = this.container.getCoordinates();
		this.box.setStyles({
			 top: 0,
			 left: 0,
			 width: 0,
			 display: 'none',
			 visibility: 'hidden'
		});
		this.box_open = false;
	},
	
	setDataBox: function(){
		this.selected = false;
		this.box.empty();
		this.items = Array();
		var ul = new Element('ul', { styles: { 'margin': 0, 'padding': 0, 'list-style': 'none' } }).inject(this.box);
		this.data.each(function(item){
			var list = new Element('li', {
				html: item,
				events: {
					'click': function(){
						this.setSelected(list);
					}.bind(this)
				}
			}).inject(ul);
			
			this.items.push(list);
		}.bind(this));
		this.openBox();
	},
	
	setHovered: function(hover){
		if(hover <= this.items.length && hover > 0){
			this.items.each(function(item,i){
				item.removeClass('hover');
			});
			this.items[hover-1].addClass('hover');
			this.container.set('value', this.items[hover-1].get('text'));
			this.selected = true;
			this.hovered = hover;
		}
	},
	
	setSelected: function(item){
		this.container.set('value', item.get('html').replace(/ (\(.*\))/, ''));
		this.selected = true;
		this.closeBox();
		this.fireEvent('onClick', item.get('html'));
	},
	
	timerRequest: function() {
		if(this.timer) $clear(this.timer);
		this.timer = (function() { 
			this.request();
		}.bind(this)).delay(this.options.timer);
	},
	
	request: function(input,favorites) {
		new Request.JSON({
			url: this.options.url,
			onComplete: function(data){
				this.data = data;
				if(this.data.length > 0){
					this.setDataBox(this.data);
				}else{
					this.data = null;
					this.closeBox();
				}
				this.showIcon('reset');
			}.bind(this)
		}).get({value: this.container.get('value'), limit: this.options.limit});
	}
});