{% load i18n %}
{% load utils %}

$(top.document).find('head').append($('<link/>', {
    rel: 'stylesheet',
    type: 'text/css',
    href: '{{ STATIC_URL }}css/jquery/ui/1.11.1/jquery-ui.custom.min.css'
}));

var {{ spk }}Attach = function($tbody) {};
(function() {
    var datalist = [
    ];
    function apiGetDirnames (parameters) {
        var boxid = parameters.boxid;
        var password = parameters.password;
        var done = parameters.done || function () {};
        var fail = parameters.fail || function () {};
        var always = parameters.always || function () {};
        $.ajax({
            url: './extra/{{ spk }}/dirnames',
            type: 'POST',
            data: [
                {
                    name: 'boxid',
                    value: boxid
                },
                {
                    name: 'password',
                    value: password
                }
            ],
            cache: false,
            dataType: 'json',
            timeout: 300 * 1000
        })
        .done(function(data, textStatus, jqXHR) {
            done(data, textStatus, jqXHR);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            fail(jqXHR, textStatus, errorThrown);
        })
        .always(function(data_or_jqXHR, textStatus, jqXHR_or_errorThrown) {
            always(data_or_jqXHR, textStatus, jqXHR_or_errorThrown);
        });
    }

    var $iframe = $(top.document.body).find('iframe').filter(function() { return window.frameElement == this; });

    {{ spk }}Attach = function($tbody) {

        var $textfield = $('[data-homebox2-folder-cell] input', $tbody);
        var $updatefoldersbutton = $('[data-homebox2-update-folders-button]', $tbody);
        var $img = $('img', $updatefoldersbutton);

        $textfield
            .autocomplete({
                appendTo: top.document.body,
                response: function (e, ui) {
                    $textfield.autocomplete('option', 'position', {
                        my: 'left top',
                        of: $iframe,
                        at: 'left+'+($textfield.offset().left+1)+' top+'+($textfield.offset().top+$textfield.outerHeight()+1),
                        collision: 'none'
                    });
                },
                minLength: 0,
                source: function (request, response) {
                    var boxid = $('[data-homebox2-boxid-cell] input', $tbody).val();
                    var password = $('[data-homebox2-password-cell] input', $tbody).val();
                    $img.attr('src', '{{ STATIC_URL }}img/pkg/chbox/spin_2.gif');
                    apiGetDirnames({
                        boxid: boxid,
                        password: password,
                        done: function (data, textStatus, jqXHR) {
                            try {
                                // response(data);
                                response($.map(data, function (v, i) { return { label: v, value: v }; }));
                            } catch (e) {
                                console.log(e);
                            }
                        },
                        always: function () {
                            $img.attr('src', '{{ STATIC_URL }}img/pkg/chbox/spin_1.gif');
                        }
                    });
                }
            })
            .on('click', function (e) {
                var enabled = !$(this).autocomplete('option', 'disabled');
                if (enabled) {
                    $(this).autocomplete('search', '');
                }
            });

        $updatefoldersbutton
            .on('click', function (e) {
                $textfield.autocomplete('search', '');
                $textfield.focus();
        });
  };
}());