{% 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 apiGetDrawernames (options) {
  function apiGetDrawernames (parameters) {
    var email = parameters.email;
    var password = parameters.password;
    var cabinet = parameters.cabinet;
    var done = parameters.done || function () {};
    var fail = parameters.fail || function () {};
    var always = parameters.always || function () {};
    $.ajax({
      url: './extra/{{ spk }}/drawernames',
      type: 'GET',
      data: [{name:'email',value:email},{name:'password',value:password},{name:'cabinet',value:cabinet}],
      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-drawername-cell] input', $tbody);
    var $updatedrawernamesbutton = $('[data-update-drawernames-button]', $tbody);
    var $img = $('img', $updatedrawernamesbutton);

    $textfield
      .descautocomplete({
        appendTo: top.document.body,
        response: function(e, ui) {
          $textfield.descautocomplete('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 email = $('[data-email-cell] input', $tbody).val();
          var password = $('[data-password-cell] input', $tbody).val();
          var cabinet = $('[data-cabinet-cell] input', $tbody).val();
          $img.attr('src', '{{ STATIC_URL }}img/pkg/fxwf/spin_2.gif');
          apiGetDrawernames({
            email: email,
            password: password,
            cabinet: cabinet,
            done: function (data, textStatus, jqXHR) {
              response(data);
            },
            always: function () {
              $img.attr('src', '{{ STATIC_URL }}img/pkg/fxwf/spin_1.gif');
            }
          });
        }
      })
      .on('click', function (e) {
        var enabled = !$(this).descautocomplete('option', 'disabled');
        if (enabled) {
          $(this).descautocomplete('search', '');
        }
      });

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