(function($) {
    var NAME = "$autocomplete";
    $.widget("lms." + NAME, {
    
        _create: function() {
            if (this.element.is("input")) {
                var node = this.element;
                
                // Create a wrapper that surrounds the input and button nodes.
                node.wrap("<div class=\"autocomplete\"></div>");
                
                // Set the default value in the text input.
                node.val(node.attr("ui:value"));
                
                // Turn the input node into an autocomplete widget.
                node.autocomplete({
                    source: $.proxy(this._source, this),
                    delay: 0,
                    minLength: 2
                });
                    
                // Minor hack: Something in the css causes the autocomplete to calculate the wrong width.
                // So we make sure that is is the correct width up front.
                node.data("autocomplete").menu.element.css('maxWidth', node.outerWidth() - 2);
                
            } else {
                $.error("The " + NAME + " widget can only be attached to <input> nodes.");
            }
        },
        
        /**
         * Search the list of valid options for any that match the given search criteria.
         */
        _source: function(request, response) {
            var url = this.element.attr("ui:url");
            
            $.ajax({
                url: url,
                dataType: "json",
                data: request,
                success: function(data) {
                    var result = $.map(data[0].results, function(value, index) {
                        return {
                            id: value,
                            label: value.replace(
                                new RegExp("(?![^&;]+;)(?!<[^<>]*)("
                                    + $.ui.autocomplete.escapeRegex(request.term)
                                    + ")(?![^<>]*>)(?![^&;]+;)", "gi"),
                                "<strong>$1</strong>"),
                            value: value
                        };
                    });
                    response(result);
                }
            });
        }
    });
})(jQuery);