/**
 * 1. Create DIV-element with child-DIVs for each possibility (p.h. with ID "kaas").
 * 2. Create an input element with a keyup handler.
 * 3. Let the keyup handler call the AutoFill.focus(document.getElementById("kaas")); function.
 **/

var AutoFill = new function() {};

/** The input element which let's the user generate search. **/
AutoFill.inputElement = null;

/** The element which holds all divs with all possibilities. **/
AutoFill.listElement = null;

/** The selected item in the possibilities list. **/
AutoFill.selectedIndex = -1;

/**
 * Set the autofiller element and give focus to it.
 * 
 * @param element	The element to set as AutoFiller.
 **/
AutoFill.focus = function(input, element,data,dummie_field) {
	var el = input;
	var value = el.value;
	if (value.length > 0){
		
		/*var words = data.split(' ');
		//alert(words.length);
		
		
		if (value.length > 0) {
			
			var reg = new RegExp(value, "gi");
			var posibles ='';
			var aantal_chars = value.length;
							
			for(i=0;i<words.length;i++){
				if (words[i].match(reg)){
					if (words[i] != value){
						posibles += '<div onclick="AutoFill.handleSelectedValue(this.innerHTML);">' + words[i] + '</div>';		
					}
				}
			}
		} */
		//document.getElementById('autofill').innerHTML= posibles;	
		// Store the input-element if not yet stored:
		if (AutoFill.inputElement != input) {
			// Add handlers:
			$(input).on("keyup", function(e) {
				e = !e ? windows.event : e;
				
				switch (e.keyCode) {
					case 40:
						AutoFill.select(AutoFill.selectedIndex + 1);
						break;
					
					case 38:
						AutoFill.select(AutoFill.selectedIndex - 1);
						break;
						
					case 13:
						AutoFill.handleSelectedValue();
						$(dummie_field).submit('./Extensions/dummie_module/dummie_change.php',$(dummie_field).$());
						
						break;
						
					case 27:
						document.getElementById('autofill').innerHTML= '';
						
						break;
					default:
						//alert(document.getElementById('waarde').value);
						//$('autofill').submit('dummie_module/dummie_autofill.php', value);
						$('autofill').submit('./Extensions/dummie_module/dummie_autofill.php',$(dummie_field).$(),AutoFill.bordertofill);
						
					; 
				}
			});
			
			AutoFill.inputElement = input;
		}
		
		// Store the element if not yet stored:
	
		if (AutoFill.listElement != element) {
		
			
			AutoFill.listElement = element;
		}
	
		
		// Select the first item:
		//AutoFill.select(0);
	}
	AutoFill.clearHighlight = function() {
		
		for (var i = 0; i < AutoFill.listElement.children.length; i++) {
		 	$(AutoFill.listElement.children[i]).removeClass("selected");
		}	
		
	}
	/**
	 * Select a possibility and highlight it.
	 *
	 * @param index		The index of the list item.
	 **/
	AutoFill.select = function(index) {
		if (index < 0) {
			index = 0;
		} else if (index >= AutoFill.listElement.children.length) {
			index = AutoFill.listElement.children.length - 1;
		}
		
		
		// Store the selected index:
		AutoFill.selectedIndex = index;
		
		// Highlight the selected item
		AutoFill.highlight();
	}
	
	/**
	 * Highlight the selected item.
	 **/
	 
	AutoFill.highlightmouseover = function(element,index) {
		
		AutoFill.selectedIndex = index;
		
		AutoFill.clearHighlight();
		
		$(element).addClass("selected");
		
		
		
		
	}
	
	AutoFill.bordertofill = function(){
		if (AutoFill.listElement.children.length == 0){
			document.getElementById('autofill').style.border ='none';		
		}
		else{
			document.getElementById('autofill').style.border ='1px solid';
		}
	}
	
	AutoFill.highlight = function() {
		index = AutoFill.selectedIndex;
			
			AutoFill.clearHighlight();
			
		// If index out of range, unhighlight all possibilities:
		if (index < 0 || index >= AutoFill.listElement.children.length) {
			
			
			return;
		}
		
		$(AutoFill.listElement.children[index]).addClass("selected");
	}
	
	AutoFill.handleSelectedValue = function(value){
		
		if (AutoFill.selectedIndex < 0 || AutoFill.selectedIndex >= AutoFill.listElement.children.length) {
			if (AutoFill.listElement.children.length == 0){
				return;
			}
			else {
				AutoFill.selectedIndex = 0;	
			}
		}
			
		value = !value ? AutoFill.listElement.children[AutoFill.selectedIndex].innerHTML.replace(/\<\/?[^\>]+\>/gi, "") : value;
		
		AutoFill.inputElement.value = value;
		AutoFill.inputElement.focus();
		AutoFill.listElement.innerHTML= '';
		AutoFill.bordertofill();
		AutoFill.selectedIndex= -1;
	}
}