window.addEvent('domready', function() {
		
		if($('search_form_q'))
		{
			$('search_form_q').addEvent('focus', function(e) {

				new UIAutoSuggest( $('search_form_q'), {
					'url' : config__base_url
				});
			});
		}
	
	});
	
	var UIAutoSuggest = new Class({
		
		Implements : [Events, Options],

		options : {
			input 		: '',
			url			: '',
			results_box : false,
			killer		: false,
			query		: '',
			built		: false
		},
		
		initialize : function(input, options) {
			
			this.options.input = input;
			this.setOptions(options);
			
			this.setup();
		
		},
		
		setup : function() {
			
			var self = this;
			
			this.options.query = this.options.input.value;
			this.options.submit = this.options.input.getNext('input[type=submit]');
			
			self.kill();
			
			this.options.input.addEvent('keyup', function(e) {
				
				self.options.query = e.target.value;
				
				if ( e.key == 'esc') { 
					self.kill();
					e.target.blur();
				}
				
				if ( self.options.query == '' ) return; 
				if (!self.options.built) self.buildBox();
				
				self.loadContent();
				
			});
			
			// load content if not empty 
			if ( self.options.query !== '' ) {
				self.loadContent();
			}
		
		},
		
		buildBox : function() {
			
			if (this.options.built) return;
			
			var self = this;
				
			// BOX
			this.options.container = new Element('div', {
				'id' : 'search_form_container',
				'class' : 'span-10'
			}).inject( this.options.input.getParent('form'), 'bottom');
			
			// RESULTS BOX (INNER)
			this.options.results_box = new Element('div', {
				id 		: 'search_form_results'
			}).inject( this.options.container );
			
			this.options.container.setStyles({
				'margin-left' : - this.options.container.getComputedSize()['totalWidth'] + 
					this.options.input.getComputedSize()['totalWidth'],
				'z-index' : 90000
			});
			
			this.options.input.setStyles({
				'z-index' 	: 90000,
				position	: 'relative'
			});
			
			this.options.submit.setStyles({
				'z-index' 	: 90000,
				position	: 'relative'
			});
			
			// KILLER
			this.options.killer = new Element('div', {
				'class' : 'UIAutoSuggest_killer',
				'styles' : {
					'position' : 'fixed',
					'top' : 0,
					'left' : 0,
					'width' : '100%',
					'height' : '100%',
					'z-index' : 89999
				},
				'events'	: {
					'click' : function() {
						self.kill();
					}
				}
			}).inject(document.body, 'bottom');
			
			// POINTER
			var pointer = new Element('span', {
				'class' : 'UIAutoSuggest_pointer'
			}).inject(this.options.container, 'top');
			
			this.options.built = true;
			
		},
		
		loadContent : function() {
			
			var loadReq = new Request.HTML({
				url 	: this.options.url + 'ajax/search',
				update	: this.options.results_box
			}).post('search_string=' + this.options.query);
			
		},
		
		kill : function() {
			
			if (this.options.killer) {
				this.options.killer.destroy();
			}
			if (this.options.container) {
				this.options.container.destroy();
			}
			if ($$('.UIAutoSuggest_killer')) {
				$$('.UIAutoSuggest_killer').destroy();
			}
			if ($('search_form_container')) {
				$('search_form_container').destroy();
			}
			
			this.options.input.setStyles({
				'z-index' 	: 'auto',
				position	: 'static'
			});
			
			this.options.submit.setStyles({
				'z-index' 	: 'auto',
				position	: 'static'
			});
			
		}
		
	});