(function($) {
	$.widget("ui.selectAutocomplete", {
		_init: function() {
			var self = this;
			var select = this.element.hide();
			var input = $("<input/>").addClass("ui-corner-left").insertAfter(select).autocomplete({ 
				source: function(request) {
					var matcher = new RegExp(request.term, "i");
					return select.children("option").map(function() {
						var text = $(this).text();
						if (!request.term || matcher.test(text))
							return {
								id: $(this).val(),
								label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
								result: text
							};
					});
				},
				delay: 0,
				change: function(e, ui) {
					if (!ui.item) {
						// remove invalid value, as it didn't match anything
						$(this).val("");
						return;
					}
					$(this).focus();
					select.val(ui.item.id);
					self._trigger("selected", null, {
						item: select.find("[value='" + ui.item.id + "']")
					});
					
				},
				minLength: 0
			});
			input.click(function(){
                var defvalue = select.val();
                // alert(defvalue);
                if(defvalue){
    			    input.autocomplete("search", "");
    		    }else{
                    input.val('');
                    input.autocomplete("search", "");
    		    }
				input.focus();
			});
			$("<button>&nbsp;</button>")
			.insertAfter(input)
			.button({
				icons: {
					primary: "ui-icon-triangle-1-s"
				},
				text: false
			}).removeClass("ui-corner-all")
			.addClass("ui-corner-right ui-button-icon")
			.position({
				my: "left center",
				at: "right center",
				of: input,
				offset: "-22 0"
			}).css("top", "")
			.click(function() {
				// close if already visible
				// TODO but only if shown by button click
				if (input.autocomplete("widget").is(":visible")) {
					input.autocomplete("close");
					return false;
				}
				// pass empty string as value to search for, displaying all results
				input.autocomplete("search", "");
				input.focus();
				return false;
			});
			// init with preselected value

            var defvalue = select.val();
            // if(defvalue){
                var defaultext = $("#" +select.attr('id')+ " option[value='"+defvalue+"']").text();
                input.val(defaultext);
            // }
		}
	});

})(jQuery);