var MySearchBox = Class.create(
{
	
	initialize: function() {
		
		var thisObj = this;
		
		$$('.mysearchbox').each(function(element) { 
			
			this.action = element.readAttribute('title')=='showcase' ? 'searchShowcaseByKey' : 'searchProductByKey';
			
			var name = element.readAttribute('name') ? element.readAttribute('name') : '';
			var value = element.readAttribute('value') ? element.readAttribute('value') : '';
			var className = element.readAttribute('class') ? element.readAttribute('class') : '';
			var onChange = element.readAttribute('onChange') ? element.readAttribute('onChange') : '';
			var width = element.getDimensions().width-3;
			
			var ele = Builder.node('div', { className:'mysearchbox', style:'width:'+width+'px', listing:'false', onChange:onChange }, [
						  Builder.node('input', { type:'text', autocomplete:'off', name:name, value:value, className:className }),
						  Builder.node('br'),
						  Builder.node('div', { style:'display:none' }, [
							  /*Builder.node('dl', { className:className })*/
							  Builder.node('dl', { className:'mysearchbox' })							  
						  ])
					  ]);
			
			new Insertion.After(element, ele);
			ele = element.next();
			element.remove();
			
			ele.down('input').observe('keydown',function(event){ thisObj.addKeyEvent(ele, event.keyCode) });
			
		}.bind(this));
		
	},
	
	addKeyEvent: function(ele, key) {
		
		var thisObj = this;
		
		if (key==9 || key==13 || key==38 || key==40) {
			var es = ele.select('dd');
			var selected = ele.down('dd.onMouseOver');
			var new_select = '';
			if (key==9 || key==13) {
				thisObj.selectValue( ele );
			} else {
				if (ele.readAttribute('listing')!='true') thisObj.startListing(ele);
				if (selected) {
					new_select = key==40 ? selected.next() : selected.previous();
					if (!new_select) new_select = selected;
				} else {
					new_select = key==40 ? es.first() : es.last();
				}
				thisObj.onMouseOver( new_select );
			}
		} else {
			//this.startQuery(ele)
			this.startQuery.delay(0.1, this, ele);
		}
		
	},
	
	startQuery: function(thisObj, ele) {
		
		var key = ele.down('input').value;
		var action = thisObj.action;
		
		if (key!='') {
			// do some query
			new Ajax.Request('_ajax.php',
								{	method: 'post', 
									parameters: {
										ajax:true,
										action:action,
										key:key
									},
									onSuccess: function(transport, json) {
										if (json.status) {
											var l = json.records.length;
											if (l>0) {
												var key_l = key.length;
												var result = ''
												thisObj.endListing(ele);
												for (var i=0; i<l; i++) {
													value = json.records[i];
													ele.down('dl').appendChild(Builder.node('dd', { value:value }, [
													   Builder.node('span', value.substr(0, key_l)),
													   value.substr(key_l)
													]));
												}
												thisObj.startListing(ele);
											}
										}
									} 
								}
							); 
		} else {
			thisObj.endListing(ele);
		}
			
		
	},
	
	addBlurEvent: function(ele) {
		
		var thisObj = this;
		
		document.observe('click',function(event){ 
			if (ele.readAttribute('listing')=='true' && !event.findElement().descendantOf(ele)) thisObj.endListing(ele);
		});
		
	},
	
	stopBlurEvent: function(ele) {
		
		document.stopObserving('click');
		
	},
	
	addClickEvent: function(ele) {
		
		var thisObj = this;
		
		ele.observe('click',function(){ thisObj.selectValue(ele) });
		ele.select('dd').each(function(e) { 
			e.observe('mouseover',function(){ thisObj.onMouseOver(e) });
		}.bind(this));
						  
	},
	
	stopClickEvent: function(ele) {
		
		var thisObj = this;
		
		ele.stopObserving('click');
		ele.select('dd').each(function(e) { 
			e.stopObserving('mouseover');
		}.bind(this));
						  
	},
	
	onMouseOver: function(e) {
		
		var thisObj = this;
		
		e.siblings().each(function(e) { thisObj.onMouseOut(e) });
		e.addClassName('onMouseOver');
		e.up('div.mysearchbox').down('input').value = e.readAttribute('value');
						  
	},
	
	onMouseOut: function(e) {
		
		e.removeClassName('onMouseOver');
		
	},
	
	startListing: function(ele) {
		
		var thisObj = this;
		
		if (ele.readAttribute('listing')=='true') return;
		ele.down('div').show();
		ele.writeAttribute('listing', 'true' );
		this.addBlurEvent(ele);
		this.addClickEvent(ele)
		
	},
	
	endListing: function(ele) {
		
		var thisObj = this;
		
		if (ele.readAttribute('listing')=='false') return;
		ele.down('div').hide();
		ele.writeAttribute('listing', 'false' );
		this.stopBlurEvent(ele);
		this.stopClickEvent(ele);
		ele.down('dl').innerHTML = '';
		
	},
	
	selectValue: function(ele) {
		
		var e = ele.down('dd.onMouseOver');
		
		if (e) this.endListing(ele);
		
	}
	
}
);

function initMySearchBox() { mylightbox = new MySearchBox(); }
Event.observe(window, 'load', initMySearchBox, false);
//Component.init('.mylightbox','MySearchBox');