<script>

    jQuery.noConflict();

    function loadAnnotator(selector, uri) {
        jQuery(document).ready(function ($) {
            var content = $(selector).annotator();

            content.annotator('addPlugin', 'AnnotoriousImagePlugin');
            content.annotator('addPlugin', 'MyTags');
            content.annotator('addPlugin', 'Store', {
                prefix: '/annotator',
                annotationData: {'annotator_schema_version': "v1.0", 'uri': uri, 'project_id': '<%= project_id %>' },
                loadFromSearch: {'uri': uri, 'project_id': '<%= project_id %>'}
            });

            $(selector + " .annotator-adder").on("click", function () {
                setTimeout(function () {
                    $(selector + " .tagify__input").focus();
                }, 150);
            });

        });
    }


    function loadVideoAnnotator(video_id) {
        jQuery(document).ready(function ($) {
            var options = {
                optionsAnnotator: {
                    store: {
                        prefix: '/annotator',
                        annotationData: {
                            'annotator_schema_version': "v1.0",
                            'uri': '/video/' + video_id,
                        },
                        loadFromSearch: {'uri': '/video/' + video_id, 'project_id': '<%= project_id %>'},
                    },
                },
            }
            var ova = new OpenVideoAnnotation.Annotator($('#video-wrapper-' + video_id), options);
            ova.annotator.addPlugin('Tags');
            annotationAutocompleteTags('#video-wrapper-' + video_id);
        });
    }


    function annotationAutocompleteTags(selector) {
        <%# language = DiscourseAnnotator::UserSetting.language_for_user(current_user) %>
        <%# var availableCodes = <%= DiscourseAnnotator::Code.with_localized_codes(language: language).where(creator_id: current_user.id).order(name_with_path: :asc).map(&:name_with_path).to_json.html_safe -% >;  %>

        jQuery(document).ready(function ($) {
            $(selector).data('annotator').plugins.Tags.input.autocomplete({
                // source: availableCodes,
                <%# See: https://stackoverflow.com/questions/9656523/jquery-autocomplete-with-callback-ajax-json %>
                source: function (request, response) {
                    $.ajax({
                        url: "/annotator/projects/<%= project_id %>/localized_codes.json",
                        dataType: "json",
                        data: {
                            q: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.localized_path,
                                    value: item.localized_path
                                };
                            }));
                        }
                    });
                },
                minLength: 0,
                open: function () {
                    $(this).autocomplete('widget').css('z-index', 10000);
                    return false;
                }
            }).focus(function () {
                $(this).data("uiAutocomplete").search($(this).val());
            });
        });
    }

</script>