/* Select Multiple avec auto-complétion 
 * prototype.js 1.6.0.2
 * scriptaculous 1.8.1 (optional)
 */
 
 
 var autoCompletion = Class.create({
	selectName : null, // le name du select multiple
	option : null /*{
		nbCharacter : 4, // nombre de caractère à partir duquel on va suggérer des options
		ajaxUrl : null, // l'adresse de l'url ajax
		imagesFolder : null, // dossier images
		onSelect : Prototype.emptyFunction,
		submitOnChose : false
	}*/,
	queryInput : null, // l'id de l'input text	
	suggestBox : null/*{
		suggestContainer : null,
		suggestList : null, // l'ul de suggestion
		suggestElements : [] // liste des li des éléments suggérés
	}*/,
	
	initialize: function(queryInputId, suggestContainerId, option){
		/*this.option.nbCharacter = option.nbCharacter || this.option.nbCharacter;
		this.option.ajaxUrl = option.ajaxUrl || this.option.ajaxUrl;
		this.option.onSelect = option.onSelect || this.option.onSelect;
		this.option.submitOnChose = option.submitOnChose || this.option.submitOnChose;*/
		//Object.extend(this.option, option);
		this.option=Object.extend({
			nbCharacter : 4, // nombre de caractère à partir duquel on va suggérer des options
			ajaxUrl : null, // l'adresse de l'url ajax
			imagesFolder : null, // dossier images
			onSelect : Prototype.emptyFunction,
			submitOnChose : false
		},option||{});
		this.queryInput = $(queryInputId);
		this.suggestBox = {
			suggestContainer : $(suggestContainerId),
			suggestList : $(suggestContainerId).getElementsBySelector('ul')[0],
			suggestElements: []
		};
		this.queryInput.writeAttribute({'autocomplete': 'off'}); // annule l'autocompletion du navigateur
		this.queryInput.observe('keyup',this.checkKeywords.bindAsEventListener(this));
		//this.queryInput.observe('focus',this.checkKeywords.bindAsEventListener(this));
		this.queryInput.observe('click',this.checkKeywords.bindAsEventListener(this));	
		this.queryInput.observe('blur',this.isHidable.bindAsEventListener(this));
		
		return true;
		
	},
	
/* --- CHECK ENTERED WORDS --- */
	checkKeywords: function(){
		if(this.queryInput.value.length >= this.option.nbCharacter){ 
			this.getSuggestOptions(this.queryInput.value);
		}
		else{
			this.hideSuggestBox();
		}
		return true;
	},
	
	getSuggestOptions: function(input){
		//Requete Ajax
		
		ajaxRequest = new Ajax.Request(this.option.ajaxUrl,{
			method:'post',
			parameters:{
				keyword : this.queryInput.value //keyword sera la variable à récupérer dans le $_POST['keyword'];
			},
			onComplete: function(response){
				var AjaxResponse = response.responseText;
				var suggestOptions = AjaxResponse.evalJSON();
				this.insertSuggestOptions(suggestOptions);
				return true;
			}.bindAsEventListener(this)
		});
		
		/*var AjaxResponse = '[["label1","value1"],["label2","value2"],["label3","value3"]]';
		var suggestOptions = AjaxResponse.evalJSON();
		this.insertSuggestOptions(suggestOptions);
		return true;*/
	},
	
	insertSuggestOptions : function(suggestOptions){
		var newArrayOptions = [];
		
		suggestOptions.each(function(keyword){
				
				newArrayOptions.push( new optionElement(keyword));
			
		}.bind(this));
		
		//Si le array récupéré est différent de l'ancien, on réactualise
		if( newArrayOptions != this.suggestBox.suggestElements){
			/*this.suggestBox.suggestElements.each(function(option){
				option.elementTooltip.wrapper.remove();
				console.log(option.elementTooltip.wrapper);
			});*/
			
			this.suggestBox.suggestElements = newArrayOptions;
			if(this.suggestBox.suggestElements.length > 0){ //Il y a plusieurs suggestion
				this.suggestBox.suggestList.update(); //On réinitialize la liste des li
				
				this.suggestBox.suggestElements.each(function(option){
					this.suggestBox.suggestList.insert(option.elementLi);
					
					if( option.elementTooltip != null) option.elementLi.observe('click',  option.elementTooltip.buttonEvent);
					option.elementLi.observe('click',function(){
						if(typeof(autoclose) !='undefined') autoclose.stop();
						option.elementLi.stopObserving('click');
						
						this.transportChosenElement(this, option);
						this.option.onSelect();
					}.bindAsEventListener(this));
					
					option.elementLi.observe('mouseover',this.toggleHover.bindAsEventListener(this, 'over',option.elementLi));
					option.elementLi.observe('mouseout',this.toggleHover.bindAsEventListener(this, 'out',option.elementLi));
					
				}.bind(this));
				this.showSuggestBox();
				return true;
			}
			else{ // aucune suggestion
				this.suggestBox.suggestList.update('<li style="display:none">no suggest</li>');
				this.hideSuggestBox();
				return false;
			}
		}
		
	},
/* --- END CHECK ENTERED WORDS --- */

/* --- TOGGLE CSS CLASS HOVER ON MOUSEOVER LI --- */
	toggleHover : function(e){
		var action = $A(arguments)[1];
		var li = $A(arguments)[2];
		if (action == 'over' && !li.hasClassName('hover')){
			li.addClassName('hover');
		}
		if (action == 'out' && li.hasClassName('hover')){
			li.removeClassName('hover');		
		}
	},
	
/* --- END TOGGLE CSS CLASS HOVER ON MOUSEOVER LI --- */



/* --- TRANSPORT CHOSEN ELEMENT --- */
	transportChosenElement : function(e){
		var option = $A(arguments)[1];
		this.queryInput.value = option.elementName;
		this.queryInput.focus();
		this.hideSuggestBox();
		//console.log(this.option.submitOnChose);
		if(this.option.submitOnChose) {
			this.queryInput.up('form').submit();
		}
	},
/* --- END TRANSPORT CHOSEN ELEMENT --- */

/* --- SHOW HIDE SUGGEST --- */	
	showSuggestBox: function(){
		if(this.suggestBox.suggestContainer.getStyle('display') == 'none'){			
			if(typeof(Effect) != 'undefined'){ // si ya scriptaculous, on fait un effet, sinon un simple show
				new Effect.Appear(this.suggestBox.suggestContainer,{
					duration:0.5
				});
			}
			else this.suggestBox.suggestContainer.show();
			return true;
		}
	},
	
	hideSuggestBox: function(){
		if(this.suggestBox.suggestContainer.getStyle('display') != 'none'){
			
			if(typeof(Effect) != 'undefined'){
				new Effect.Fade(this.suggestBox.suggestContainer,{
					duration:0.5
				});
			}
			else this.suggestBox.suggestContainer.hide();
			return true;
		}
	},
	
	isHidable: function(){ // detect quand on a ni le focus sur l'input, ni sur l'une des boites de suggestion/elements choisis	
		autoclose = new PeriodicalExecuter(function(pe){			
			this.hideSuggestBox(); // si au bout d'1/4 de seconde on ne detecte pas de click, on ferme
			pe.stop();
			return true;
		}.bind(this),0.25);
	}
 });
 /* --- END SHOW HIDE SUGGEST --- */
 
 
 
 
 /* ------------------------------------------------
	Class pour les options suggérés
 --------------------------------------------------*/
 
 var optionElement = Class.create({ // Un élément est caractérisé par son libelle et sa valeur
	elementName : null,
	elementLi : null,
	initialize: function(name){
		this.elementName = name,
		this.elementLi = new Element('li').update(this.elementName);
		return true;
	}
});