Element.extend({
	hide: function() {
		this.style.display = 'none';
		return this;
	},
	show: function() {
		this.style.display = '';
		return this;
	}
});

var autocompleteDiv = false;

var AjaxAutoCompleter = new Class({ 
	initialize: function(element, url, options) { 
		//console.log('init'+element);

		if(!autocompleteDiv){
			autocompleteDiv = document.createElement('div');
			autocompleteDiv.style.position = 'absolute';
			autocompleteDiv.style.height = '150px';
			autocompleteDiv.style.overflow = 'auto';
			autocompleteDiv.style.display = 'none';
			document.body.appendChild(autocompleteDiv);
			$(autocompleteDiv).addClass('autocomplete');
		}

		autocompleteDiv.innerHTML = '';
		
		this.options = Object.extend({ 
			minChars: 1, 
			delay: 400, 
			indicator: null 
		}, options || {}); 


		if (this.options.indicator != null) { 
			this.indicator = $(this.options.indicator); 
		} 

		this.element = $(element); 
		this.choices = autocompleteDiv; 
		this.url = url; 
		this.choices.style.display= 'none';
		this.currentValue = ''; 
		this.element.setAttribute("autocomplete", "off"); 
		this.element.addEvent('keyup', this.onTextChange.bindAsEventListener(this)); 
		this.element.addEvent('focus', this.onTextFocus.bindAsEventListener(this)); 
		
		this.element.addEvent('blur', this.onTextBlur.bindAsEventListener(this)); 
		// need keydown for IE as it will not fire for arrow keys 
		this.element.onkeydown = this.onKeyDown.bind(this); 
		// will fire for enter key on all browsers 
		this.element.onkeypress = this.onKeyPress.bind(this); 		

	}, 
	
	onKeyPress: function(e) { 

		if (window.event) { 
			var keyCode = window.event.keyCode;
		} else { 
			var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; 
		} 
		if (keyCode == 13) { 
			
			if (this.choices.style.display == '') { 
				var currentSel = $E('div.selected', this.choices); 
				if (currentSel) {
					this.choiceSelect(currentSel); 
				} 
			} 
			return false; 
		} 
		return true; 
	}, 
	
	onKeyDown: function(e) { 
		if (window.event) { 
			var keyCode = window.event.keyCode; 
		} else { 
			var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; 
		} 
		if (keyCode == 40 || keyCode == 38) { 

			if (this.choices.style.display == '') { 
				// 40 = Down, 38 = Up 
				var currentSel = $E('div.selected', this.choices); 
				if (keyCode == 38) { 
					// Up 
					if (currentSel && currentSel.getPrevious()) { 
						currentSel.removeClass('selected'); 
						currentSel.getPrevious().addClass('selected'); 
					} else if (!currentSel) { 
						var tempSel = $ES('div', this.choices); 
						if (tempSel && tempSel.length > 0) { 
							tempSel[tempSel.length-1].addClass('selected'); 
						} 
					} 
				} else if (keyCode == 40) { 
					// Down 
					if (currentSel && currentSel.getNext()) { 
						currentSel.removeClass('selected'); 
						currentSel.getNext().addClass('selected'); 
					} else if (!currentSel) { 
						var tempSel = $ES('div', this.choices); 
						if (tempSel && tempSel.length > 0) { 
							tempSel[0].addClass('selected'); 
						} 
					}
				} 
				
						
			} 
			return false; 
		} 
		return true; 
	}, 
	
	onTextChange: function() { 
		//console.log('change '+this.element.value);
		if (this.fetchDelay) { 
			this.fetchDelay = $clear(this.fetchDelay); 
		} 
		this.fetchDelay = this.fetch.delay(this.options.delay, this); 
	}, 

	onTextFocus: function() { 
		this.element.removeClass('click_selected');

		var myAjax = new Ajax(this.url + this.element.value + '&alert=1', { method: 'get', onFailure:this.onFailure, onComplete:this.onSuccess.bindAsEventListener(this)}).request(); 
	}, 
	
	fetch: function() { 
		if (this.element.value.length <= this.options.minChars) { 
			var myAjax = new Ajax(this.url + this.element.value + '&alert=1', { method: 'get', onFailure:this.onFailure, onComplete:this.onSuccess.bindAsEventListener(this)}).request(); 
		} else { 
			if (this.element.value != this.currentValue) { 
				this.currentValue = this.element.value; 
				this.clearSelected(); 
				//this.choices.show(); 
				if (this.indicator) { 
					this.indicator.show(); 
				} 
				var myAjax = new Ajax(this.url + this.element.value, { method: 'get', onFailure:this.onFailure, onComplete:this.onSuccess.bindAsEventListener(this)}).request(); 
			} 
		} 
	}, 
		
	onFailure: function(response) { 
		if (this.indicator) { 
			this.indicator.hide(); 
		} 
		alert('There was a problem! \n' + response.status + ' -- ' + response.statusText);
	}, 
	
	onSuccess: function(response) { 
		if (this.indicator) { 
			this.indicator.hide(); 
		} 
		if (response.trim() == '') { 
			this.choices.hide(); 
		} else { 
			var Pos = $(this.element).getPosition();
			//alert(Pos.y+' '+Pos.x+' '+this.element.offsetHeight);			
			arrrtest = $$('#div_ajaxForm #'+this.element.id);

			if(arrrtest.length > 0)
			{
				xmod = 6; ymod = 6;
				if(ie)
				{
					ymod = ymod + 1;
					xmod = xmod - 2;
				}
			}
			else
			{ 
				xmod = 1; ymod = 0;
				if(ie) ymod = ymod + 4;
			}
			
			
			
			autocompleteDiv.style.left = Pos.x + xmod + 'px';
			autocompleteDiv.style.top = Pos.y + ymod + this.element.offsetHeight + 'px';			
			autocompleteDiv.style.width = this.element.offsetWidth - 2 + 'px';
			
			// changement manuelle width
			// autocompleteDiv.style.width = '150px';

			this.choices.setHTML(response); 
			$ES('div.results', this.choices).each(function (el) { 
				el.addEvent('mouseover', function() {this.choiceOver(el);}.bind(this)); 
				el.addEvent('mousedown', function() {this.choiceSelect(el);}.bind(this)); 
			}.bind(this)); 
			
			this.choices.show();
		} 
	}, 
	
	onTextBlur: function() { 
		this.choices.hide();
		
	}, 
	
	choiceOver: function(element) { 
		this.clearSelected(); 
		//this.pushValue(element);
		element.addClass('selected'); 
	}, 
	
	choiceSelect: function(element) { 
		//eval(element.id); 
		this.currentValue = this.element.value; 
		this.pushValue(element);
		this.choices.hide(); 
		this.element.blur();
		
		// arrT = this.element.name.split('emp_');
		arrT2 = element.id.split('_');		
		$('final_'+this.element.name).value = arrT2[1];
		
		this.element.addClass('click_selected');
	}, 

	pushValue: function(element2) { 
		this.element.value = $('input_' + element2.id).value;
	}, 
	
	clearSelected: function() { 
		$ES('div.selected', this.choices).each(function (el) { 
			el.removeClass('selected'); 
		}); 
	}
});