Views.SelectAutoFilter = Views.Text.extend({
	
	classType: "Views.SelectAutoFilter",
    tagName: "div",
    
    listenEvents: function() {
    	this.on("onrender", this.onRender);
    },
    
    triggerEventsOn: function() {
    },
    
    triggerAddModelToCollectionOn: function() {
    	var that = this;
    	this.on("onautocompleteitemselected", function(event) {
    		that.trigger("onaddmodeltocollection");
    	});
    },
    
    onRender: function() {
    	this.$el.removeClass("textInput").addClass("selectAutoFilterInput");
    	
    	if (this.model.get("value") != "") {
    		if (!this.model.get("label")) {
    			var thepossiblevalue = this.options.possiblevalues.getByProperty("value", this.model.get("value"));
    			if (thepossiblevalue) {
    				this.$el.val(thepossiblevalue.get("label"));
    				this.model.set("label", thepossiblevalue.get("label"));
    			}
    		}
    	}
    	
		this.checkError();

		this.on("onmodelchange", function(){
	    	this.checkError();
		});
		
		this.$el.on("keyup", {view: this}, function(event) {
			event.data.view.checkError();
			event.data.view.keyupAutoComplete(event);
		});

		this.$el.on("click", {view: this}, function(event) {
			event.data.view.refreshAutoComplete();
			var autoCompleteEl = $("#autocomplete_" + event.data.view.id);
			if (autoCompleteEl.length > 0) {
				if (autoCompleteEl.attr("isopened") == "true") {
					event.data.view.closeAutoComplete();
				} else {
					event.data.view.openAutoComplete();
				}
			}
		});

		this.on("onblur", function() {
			if (this.$el.val() != "") {
				this.validateCurrentAutoCompleteItem();
			} else {
				this.model.set("value", "");
			}
			this.checkError();
			var autoCompleteEl = $("#autocomplete_" + this.id);
			if (autoCompleteEl.length > 0) {
				if (autoCompleteEl.attr("ismouseovered") != "true") {
					this.closeAutoComplete();
				}
			}
		});
		
		this.on("onfocus", function() {
			this.checkError();
		});
    },
    
    resetAddEl: function() {
    	var addAction = this.options.parentview.options.actions.add;
    	var authorizedouble = addAction.authorizedouble;
    	if (!authorizedouble) {
	    	var aSelect = this.$el;
	    	
	    	if (this.options.parentview.model.length >= this.options.possiblevalues.length) {
	    		this.hide();
	    	} else {
	    		this.show();
	    	}
    	}
    	$("#autocomplete_" + this.id).remove();
    	this.$el.val("");
    	this.$el.attr("val", "");
    },
    
    resetEl: function() {
    	//this.$el.val("");
    },
    
    checkError: function() {
		//if input is different than model.value, then reset the model.value
    	var currentFilter = this.$el.val();
    	var currentSelectedLabel = this.model.get("label");
    	if (!currentSelectedLabel) {
    		currentSelectedLabel = "";
    	}
		if (currentFilter.toLowerCase() != currentSelectedLabel.toLowerCase()) {
			this.model.set("value", "");
			this.model.set("label", "");
		}
    	
    	
		if (!this.model.get("value")) {
    		this.$el.addClass("error");
    		return;
    	} else {
    		if (this.model.get("value") == "") {
    			this.$el.addClass("error");
    			return;
    		}
    	}
		this.$el.removeClass("error");
    },
    
    keyupAutoComplete: function(event) {
    	if (event.keyCode == 27) { //ECHAP
    		this.closeAutoComplete();
    	} else if (event.keyCode == 40) { //DOWN ARROW
        	var autoCompleteEl = $("#autocomplete_" + this.id);
        	if (autoCompleteEl.length > 0) {
        		if (autoCompleteEl.attr("isopened") == "true") {
        			this.selectNextAutoCompleteItem();
        		} else {
        			this.openAutoComplete();
        		}
        	}
    	} else if (event.keyCode == 34) { //NEXT PAGE
        	var autoCompleteEl = $("#autocomplete_" + this.id);
        	if (autoCompleteEl.length > 0) {
        		if (autoCompleteEl.attr("isopened") == "true") {
        			this.selectNextAutoCompleteItem();
        		} else {
        			this.openAutoComplete();
        		}
        		event.stopPropagation();
        	}
    	} else if (event.keyCode == 38) { //UP ARROW
        	var autoCompleteEl = $("#autocomplete_" + this.id);
        	if (autoCompleteEl.length > 0) {
        		if (autoCompleteEl.attr("isopened") == "true") {
        			this.selectPreviousAutoCompleteItem();
        		} else {
        			this.openAutoComplete();
        		}
        	}
    	} else if (event.keyCode == 33) { //PREVIOUS PAGE
        	var autoCompleteEl = $("#autocomplete_" + this.id);
        	if (autoCompleteEl.length > 0) {
        		if (autoCompleteEl.attr("isopened") == "true") {
        			this.selectPreviousAutoCompleteItem();
        		} else {
        			this.openAutoComplete();
        		}
        		event.stopPropagation();
        	}
    	} else if (event.keyCode == 13) { //ENTER
    		this.validateCurrentAutoCompleteItem();
    		this.$el.focus();
    		this.closeAutoComplete();
    	} else {
    		this.refreshAutoComplete();
    		this.openAutoComplete();
    	}
    },
    
    refreshAutoComplete: function() {
    	
		var autoCompleteEl = $("#autocomplete_" + this.id);
		
		if (autoCompleteEl.length == 0) {
			autoCompleteEl = $("<div id='autocomplete_" + this.id + "' style='display:none' class='autoComplete'></div>");
			autoCompleteEl.width(this.$el.outerWidth() - 2);
			$("body").append(autoCompleteEl);
			autoCompleteEl.position({
				my: "left top",
				at: "left bottom",
				of: this.$el
			});
		} else {
			autoCompleteEl.html("");
		}
		autoCompleteEl.on("mouseenter", function() {
			$(this).attr("ismouseovered", "true");
		});
		autoCompleteEl.on("mouseleave", function() {
			$(this).attr("ismouseovered", "false");
		});
		autoCompleteEl.on("blur", function() {
			$(this).attr("ismouseovered", "false");
		});
		
		autoCompleteEl.append("<ul></ul>");
		
		var resultUl = $("ul", autoCompleteEl);
		
		var anItem;
		
		//if no value was selected, so if model.value is empty, execute the filter
		//if after the filter no possible values are left in the list, show all possible values
		//if model.value is not empty, show all possible values
		
		var possiblevaluestoconsider = [];
		if (this.model.get("value") == "") {
			var thefilter = this.$el.val();
			for (var i=0; i<this.options.possiblevalues.length; i++) {
				var theLabel = this.options.possiblevalues.models[i].get("label");
				
				if (theLabel.toLowerCase().substring(0, thefilter.length) == thefilter.toLowerCase()) {
					possiblevaluestoconsider.push(this.options.possiblevalues.models[i]);
				}
			}
			if (possiblevaluestoconsider.length == 0) {
				possiblevaluestoconsider = [];
				possiblevaluestoconsider = this.options.possiblevalues.models;
			}
		} else {
			possiblevaluestoconsider = this.options.possiblevalues.models;
		}
		
		
		for (var i=0; i<possiblevaluestoconsider.length; i++) {
			anItem = $("<li val='" + possiblevaluestoconsider[i].get("value") + "'>" + possiblevaluestoconsider[i].get("label") + "</li>");

			anItem.on("click", {view: this}, function(event){
				event.data.view.selectAnAutoCompleteItem($(this));
				event.data.view.validateCurrentAutoCompleteItem();
				event.data.view.$el.focus();
				event.data.view.closeAutoComplete();
			});
			resultUl.append(anItem);
		}
		
		//if (this.model.get("value") == "") {
			if (!this.options.actions.add.authorizedouble) {
				if (this.options.parentview) {
					if (this.options.parentview.options.ismultivalued) {
						var that = this;
						this.options.parentview.model.each(function(modelItem) {
							if (modelItem.get("value") != that.$el.attr("val")) {
								$("li[val='" + modelItem.get("value") + "']", autoCompleteEl).remove();
							}
						});
					}
				}
			}
		//}
		
		var liList = $("li", autoCompleteEl); 
		if (liList.length == 1) {
			//if there is only one possible value left, preselect it
			if (this.$el.val() != "" && this.model.get("value") == "") {
				this.selectAnAutoCompleteItem($(liList[0]));
			}
		} else {
			if (this.$el.attr("val") != "") {
				var liToSelect = $("li[val='" + this.$el.attr("val") + "']", autoCompleteEl);
				if (liToSelect.length > 0) {
					this.selectAnAutoCompleteItem(liToSelect);
				}
			}
		}
		
		if ($("li", autoCompleteEl).length > 0) {
			//this.openAutoComplete();
		} else {
			this.resetAutoComplete();
		}
    },

    resetAutoComplete: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		autoCompleteEl.remove();
    	}
    },
    
    closeAutoComplete: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		autoCompleteEl.attr("isopened", "false");
    		autoCompleteEl.slideUp(100);
    	}
    },
    
    openAutoComplete: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id);
    	if (autoCompleteEl.length > 0) {
    		if (autoCompleteEl.attr("isopened") != "true") {
	    		autoCompleteEl.attr("isopened", "true");
	    		//autoCompleteEl.slideDown(100);
	    		var that = this;
	    		autoCompleteEl.slideDown(100, function(){
	    			var currentSelectedItem = $("li[selected]", autoCompleteEl);
	    			if (currentSelectedItem.length > 0) {
	   					$("ul", autoCompleteEl).scrollTop($("ul", autoCompleteEl).scrollTop() + currentSelectedItem.position().top - 20);
	    			}
	    		});
    		}
    	}
    },
    
    selectNextAutoCompleteItem: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		var currentSelectedItem = $("li[selected]", autoCompleteEl);
    		if (currentSelectedItem.length > 0) {
	    		if (currentSelectedItem.next().length > 0) {
	    			currentSelectedItem.next().attr("selected", "");
	    			currentSelectedItem.removeAttr("selected");
	    		} else {
	    			currentSelectedItem.removeAttr("selected");
	    			$("li", autoCompleteEl).first().attr("selected", "");
	    		}
    		} else {
    			$("li", autoCompleteEl).first().attr("selected", "");
    		}
    		
    		var selectedTop = $("li[selected]", autoCompleteEl).position().top;
    		var selectedHeight = $("li[selected]", autoCompleteEl).outerHeight(true);
    		var autoCompleteHeight = $("ul", autoCompleteEl).height();
    		var autoCompleteScroll = $("ul", autoCompleteEl).scrollTop();

    		if (selectedTop + 20 >= autoCompleteHeight) {
    			$("ul", autoCompleteEl).scrollTop($("ul", autoCompleteEl).scrollTop() + selectedHeight);
    		}
    		if (selectedTop < 0) {
    			$("ul", autoCompleteEl).scrollTop(selectedTop + autoCompleteScroll - autoCompleteHeight + 20 + selectedHeight);
    		}
    	}
    },

    selectPreviousAutoCompleteItem: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		var currentSelectedItem = $("li[selected]", autoCompleteEl);
    		if (currentSelectedItem.length > 0) {
	    		if (currentSelectedItem.prev().length > 0) {
	    			currentSelectedItem.prev().attr("selected", "");
	    			currentSelectedItem.removeAttr("selected");
	    		}else {
	    			currentSelectedItem.removeAttr("selected");
	    			$("li", autoCompleteEl).last().attr("selected", "");
	    		}
    		}
	    	else {
	    		$("li", autoCompleteEl).last().attr("selected", "");
	    	}
    		
    		var selectedTop = $("li[selected]", autoCompleteEl).position().top;
    		var selectedHeight = $("li[selected]", autoCompleteEl).outerHeight(true);
    		var autoCompleteHeight = $("ul", autoCompleteEl).height();
    		var autoCompleteScroll = $("ul", autoCompleteEl).scrollTop();

    		if (selectedTop <= 20) {
    			$("ul", autoCompleteEl).scrollTop($("ul", autoCompleteEl).scrollTop() - selectedHeight);
    		}
    		if (selectedTop > autoCompleteHeight) {
    			//$("ul", autoCompleteEl).scrollTop(selectedTop);
    			$("ul", autoCompleteEl).scrollTop(selectedTop + autoCompleteScroll - 20);
    		}
    	}
    },
    
    validateCurrentAutoCompleteItem: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		var currentSelectedItem = $("li[selected]", autoCompleteEl);
    		if (currentSelectedItem.length > 0) {
    			this.$el.attr("val", currentSelectedItem.attr("val"));
    			this.$el.val(currentSelectedItem.html());
    			
    			this.$el.trigger("change");
    			
    			this.trigger("onautocompleteitemselected");
    		
    			//autoCompleteEl.remove();
    		}
    	}
    },

    selectAnAutoCompleteItem: function(el) {
    	this.unselectAllAutoCompleteItems();
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		el.attr("selected", true);
    	}
    },
    
    unselectAllAutoCompleteItems: function() {
    	var autoCompleteEl = $("#autocomplete_" + this.id); 
    	if (autoCompleteEl.length > 0) {
    		$("li[selected]", autoCompleteEl).removeAttr("selected");
    	}    	
    },
    
    updateModelFromInput: function(event) {
    	this.model.set("label", this.$el.val());
    	this.model.set("value", this.$el.attr("val"));
        this.trigger("onmodelchange");
    }
});

Views.SelectAutoFilterList = Views.TextList.extend({
	classType: "Views.SelectAutoFilterList",
	
    listenEvents: function() {
    	//See Views.Base listenDefaultEvents()
    	this.on("oninitialize", this.onInitialize);
    	this.on("onremovemodelfromcollection ", function() {
			this.resetEl();
		});
    	this.on("onrenderlist", function() {
    		this.resetEl();
    	});
    },
	
    onInitialize: function() {
		if (!this.options.actions) {
			this.options.actions = {};
		}
		if (!this.options.actions.add) {
			this.options.actions.add = {};
		}
		if (!this.options.actions.remove) {
			this.options.actions.remove = {};
		}
		if (!this.options.actions.remove.button) {
			this.options.actions.remove.button = {};
		}
		
		this.options.actions.add.active = true;
		//this.options.actions.add.authorizedouble = true;
		this.options.actions.remove.active = true;
		this.options.actions.remove.button.position = {
				my: "right center",
				at: "right-30 center",
				collision: "none"
			};
		
		if (!this.options.actions.sort) {
			this.options.actions.sort = {};
			this.options.actions.sort.active = false;
		}
		if (!this.options.actions.sort.button) {
			this.options.actions.sort.button = {};
		}
		
		this.options.actions.sort.button.position = {
				my: "left center",
				at: "left center",
				collision: "none"
			};
	},
	
    resetEl: function() {
    	var that = this;
    	var addAction = this.options.actions.add;
    	var authorizedouble = addAction.authorizedouble;
		if (addAction.view) {
			addAction.view.resetAddEl();
		}
		
		this.model.each(function(item) {
			var view = item.view;
			if (view) {
				if (!authorizedouble) {
					view.resetEl();
				}
				//$('option[value=""]', view.$el).html(edApplication().labels.LABELRESETTHEVALUE);
				view.$el.on("change", function(event) {
					that.resetEl();
				});
			}
		});
    }
});