( function() {

    angular.module('shared')

        .directive( 'uiAutocomplete', [function(){
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var options = scope.$eval(attrs.uiAutocomplete);
                    element.autocomplete({
                        source: options.source,
                        select: options.select,
                        dataType: "json",
                        minLength: 1,
                        delay: 100,
                        open: function (event, ui) {
                            element.attr('aria-expanded', 'true');
                        },
                        close: function (event, ui) {
                            element.attr('aria-expanded', 'false');
                        }
                    });
                    element.autocomplete("instance")._renderMenu = function (ul, items) {
                        var self = this;
                        $j.each(items, function(index, item) {
                            self._renderItemData(ul, item);
                        });
                        $j(ul).attr("role", "listbox");
                    };
                    element.autocomplete("instance")._renderItem = function (ul, item) {
                        return $j("<li>")
                            .attr("role", "option")
                            .append($j("<a>").text(item.label))
                            .appendTo(ul);
                    };
                }
            };
        }]);
})();