var TechnoSearch = new Class({
	Implements: [Events, Options],
	options : {
		'domain' : null
	},
	
	initialize : function(options){
		this.setOptions(options);
		if (!$chk($('generic_search_form')))
			return;
		this.form = $('generic_search_form');
		this.formObj = new Form($('generic_search_form'));
		this.formObj.loadInputsText();
		this.input = this.form.getElements('div.input_keyword input')[0];
		this.timer = null;
		
		this.input.addEvent('keyup', function(){
			if ($chk(this.timer))
				$clear(this.timer);
			this.timer = this.search.delay(300, this);
		}.bind(this));
		
		this.resultBox = new Element('div', {
			'class' : 'result_box',
			'styles': {
				'display' : 'none'
			}
		}).inject(this.input, 'after');
		
		this.ul = new Element('ul', {
			'class' : 'result_ul'
		}).inject(this.resultBox);
		
		this.value = '';
		
		this.status = {
			'result' : false
		};
	},
	
	search : function(){
		var value = this.input.get('value');
		
		if (value.trim() == this.value.trim() && this.status.result)
			return;
		
		if (value.trim() == this.value.trim() || value == '') {
			this.resultBox.getParent('div.input_keyword').setStyle('background-position', '0 -0px');
			this.resultBox.setStyle('display', 'none');
			this.status.result = false;
			window.removeEvents('keydown');
			this.form.removeEvents('submit');
			return;
		}
		
		this.value = value;
		if ($chk(this.request))
			this.request.cancel();
		
		var url = (this.options.domain == null) ? slsBuild.site.protocol+'://'+slsBuild.site.domainName+'/Search/AutoComplete' : this.options.domain+'/Search/AutoComplete';
		//console.log(url);
		
		this.request = new Request.JSON({
			'url' : url,
			onComplete:function(xhr) {
				this.buildMenu(xhr);
			}.bind(this)
		}).send('keyword='+this.value);
	},
	
	buildMenu : function(xhr){
		this.ul.empty();
		if ($chk(this.ul.getNext('div.more')))
			this.ul.getNext('div.more').destroy();
		this.ul.setStyle('display', 'none');
		for (var i=0;i<xhr.results.length;i++) {
			var li = new Element('li').inject(this.ul);
			var a = new Element('a', {
				'href' : xhr.results[i].collection_url,
				'title': xhr.results[i].collection_title
			}).inject(li);
			a.addEvent('mouseenter', function(el){
				this.hoverItem(el);
			}.bind(this, [a]));
			a.addEvent('mouseleave', function(){
				this.set('class', '');
			});
			var img = new Element('img', {
				'alt' : xhr.results[i].collection_title,
				'title':xhr.results[i].collection_title,
				'src' : xhr.results[i].img_url
			}).inject(a);
			var span = new Element('span', {
				'html' : xhr.results[i].collection_title
			}).inject(a);
			var clear = new Element('span', {
				'class' : 'clear'
			}).inject(li);
		}
		if (xhr.results.length > 0)
			this.ul.setStyle('display', 'block');
		
		var more = new Element('div', {
			'class' : 'more'
		}).inject(this.ul, 'after');
		var a = new Element('a', {
			'href' : xhr.url_more,
			'title': slsBuild.langs.GENERIC_SEARCH_ALL_RESULTS,
			'html' : slsBuild.langs.GENERIC_SEARCH_ALL_RESULTS
		}).inject(more);
		
		if (xhr.results.length > 0) {
			this.resultBox.getParent('div.input_keyword').setStyle('background-position', '0 -32px');
			this.resultBox.setStyle('display', 'block');
			this.status.result = true;
			window.addEvent('keydown', function(e){
				this.listenKeys(e);
			}.bindWithEvent(this));
			this.form.addEvent('submit', function(e){
				e.stop();
				this.listenKeys(e);
			}.bindWithEvent(this));
		}
	},
	
	hoverItem : function(element) {
		this.ul.getElements('li a').each(function(el, index){
			if (el != element)
				el.set('class', '');
		});
		element.set('class', 'hover');
	},
	
	listenKeys : function(e) {
		/* Down = 40
		 * Up = 38
		 * Right = 39
		 * Left = 37
		 * Enter = 13
		 * Esc = 27 	
		 * Tab = 9
		 * Shift = 16
		 * Space = 32 
		 */

		if (!$chk(this.ul.getElements('li')[0]))
			return;
		if (e.code == 40) {
			if (!$chk(this.ul.getElements('li a.hover')[0])) {
				var el = this.ul.getElements('li a')[0];
			}
			else
				var el = ($chk(this.ul.getElements('li a.hover')[0].getParent('li').getNext('li'))) ? this.ul.getElements('li a.hover')[0].getParent('li').getNext('li').getElements('a')[0] : this.ul.getElements('li')[0].getElements('a')[0];
			this.hoverItem(el);
		}
		else if (e.code == 38) {
			if (!$chk(this.ul.getElements('li a.hover')[0])) {
				var el = this.ul.getElements('li a')[this.ul.getElements('li a').length-1];
			}
			else
				var el = ($chk(this.ul.getElements('li a.hover')[0].getParent('li').getPrevious('li'))) ? this.ul.getElements('li a.hover')[0].getParent('li').getPrevious('li').getElements('a')[0] : this.ul.getElements('li')[this.ul.getElements('li').length-1].getElements('a')[0];
			
				this.hoverItem(el);
		}
		else if (e.code == 13) {
			if (!$chk(this.ul.getElements('a.hover')[0]))
				return;
			window.location = this.ul.getElements('a.hover')[0].get('href');
		}
		else if (e.code == 27) {
			this.resultBox.getParent('div.input_keyword').setStyle('background-position', '0 -0px');
			this.resultBox.setStyle('display', 'none');
			this.status.result = false;
			window.removeEvents('keydown');
			return;
		}
	}

});