var Search = new Class({
	
	Implements: [Events, Options],
	
	options: {
		ajaxOptions: null
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.request = new Request.JSON($merge({
			'url': '/ajax/search/',
			method:'GET'
		}, this.options.ajaxOptions)).addEvent('onComplete', this.complete.bind(this));
		
	},
	
	complete: function(request){
		this.fireEvent('onComplete', request);
	},
	
	query: function(value){
		
		this.request.get({q:value});
		
		return this;
	}
	
});

Search.Results = new Class({
	
	toElement: function(){
		return this.container;
	},
	
	initialize: function(){
		this.container = new Element('ul', {'class': 'searchresults'});
	},
	
	fill:function(results)
	{
		this.container.empty();
		
		if (results.user)
		{
			var li = new Element('li', {'class': 'result-header','html':'User'});
			this.container.adopt(li);
			this.fillin(results.user);
		}
		if (results.location)
		{
			var li = new Element('li', {'class': 'result-header','html':'Locations'});
			this.container.adopt(li);
			this.fillin(results.location);
		}
		
		if (results.klique)
		{
			var li = new Element('li', {'class': 'result-header','html':'Kliquen'});
			this.container.adopt(li);
			this.fillin(results.klique);
		}
		
		if (results.article)
		{
			var li = new Element('li', {'class': 'result-header','html':'Magazinartikel'});
			this.container.adopt(li);
			this.fillin(results.article);
		}
		
		if (this.container.getElements('li').length==0)
		{
			var li = new Element('li', {'class': 'result-no','html':'<i>Keine Ergebnisse</i>'});
			this.container.adopt(li);
		} else
		{
			var li = new Element('li', {'class': 'result-more','html':'<a href="/search/?q='+results.q+'">mehr..</a>'});
			this.container.adopt(li);
		}
	},
	fillin: function(results){
		
		for (var i = 0, l = results.length; i < l; i++){
			
			var li = this.parseResult(results[i]);
			
			this.container.adopt(li);
			
			if (i == results.length - 1) li.addClass('last');
		}
		
		if (results.length == 0){
			var empty = new Element('li', {'class': 'result-item first last'});
			var content = new Element('div', {'class': 'result-content', html: 'no results'});
			empty.adopt(content);
			this.container.adopt(empty);
		}
	},
	
	parseResult: function(result){
		var li = new Element('li', {'class': 'result-item'});
		var title = new Element('a', {'class': 'result-title', html: result.title, href: result.url});
		var content = new Element('div', {'class': 'result-content', html: result.content});
		li.adopt(title, content);
		return li;
	}
	
});

Search.Input = new Class({
	
	Implements: [Events, Options],
	
	options: {
		results: 4,
		placeHolder: null,
		id: null,
		className: null
	},
	
	toElement: function(){
		return this.input;
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.input = new Element('input', {type: 'text'});
		if (this.options.id) this.input.set('id', this.options.id);
		if (this.options.iclass) 
		{
			this.input.set('class', this.options.iclass);
		}
		var placeHolder= this.options.placeHolder;
		
		if (placeHolder){
			this.input.addEvents({
				
				focus: function(){
					if (this.value == placeHolder) this.value = '';
					this.removeClass('place-holder');
				},
				
				blur: function(){
					if (!this.value.length){
						this.value = placeHolder;
						this.addClass('place-holder');
					}
				}
			});
				
			this.input.fireEvent('blur');
		}
		
		this.input.addEvent('keydown', function(event){
			this.value = this.input.value;
			if (event.key == 'enter' && this.value.length) this.fireEvent('onSubmit');
		}.bind(this));
	}
	
});

window.addEvent('domready', function(){
	
	var webSearch = new Search();
	var input = new Search.Input({id: "searchfield", iclass:"search", placeHolder: 'Suche...'});
	
	
	var list = new Search.Results();
	
	li = $(list);
	li.inject('searchResults');
	li.setStyle('visibility', 'hidden');
	
	input.addEvent('onSubmit', function(){
		li.setStyles({
			top: $('searchfield').getTop()+20,
			left: $(input).getLeft(),
			width: $(input).getWidth() -2
		});
		li.setStyle('visibility', 'visible').set('html', '<li class="first last">Lade...</li>');
		webSearch.query(this.value);
	});
	
	webSearch.addEvent('onComplete', function(results){
		$(input).blur();
		list.fill(results);
	});
	
	document.addEvent('click', function(e){
		if (e.target != li && !li.hasChild(e.target)) li.setStyle('visibility', 'hidden');
	});
	
	$(input).inject('searchBox');
	
	var submit = new Element('input',{type:"button",value:" ",'class':"searchButton",
		events:{
			click:function(){
				document.location.href='/search/?q='+$('searchfield').value;
			}
		}
	});
	$(submit).inject('searchBox');
	
});