FORGE.features.assets.Drawer = function (selector) {
  this.element = $(selector);
  this.list = this.element.find('ul');
  $('#')
}

FORGE.features.assets.Drawer.prototype.close = function() {
  var drawer = this;
  drawer.asset_id_container = undefined;
  drawer.asset_url_container = undefined;
  drawer.element.animate({top: -262}, 800, 'easeInOutQuart');
  $('#asset-drawer a, #asset-drawer input').attr('tabindex', '-1');
}

FORGE.features.assets.Drawer.prototype.open = function() {
  var drawer = this;
  drawer.element.animate({top: 0}, 500, 'easeInOutQuint');
  $('#asset-drawer a, #asset-drawer input').attr('tabindex', '0');
}

FORGE.features.assets.Drawer.prototype.load = function(editor, url) {
  var drawer = this;
  var $loader = $('')
  url = typeof(url) != 'undefined' ? url : '/forge/assets/drawer';
  drawer.activeEditor = editor;

  drawer.list.html('<li><img src="<%= asset_path 'forge/ajax-loader.gif' %>" alt="Loading..." style="margin-top: 40%;" /></li>')
  drawer.resize();

  drawer.open();

  drawer.list.load(url, function() {
    drawer.doneLoading = true;
    $('#frame').off('jsp-scroll-x')

    drawer.resize();
    $('#frame').data('jsp').scrollTo(0, 0);

    $('#frame').on('jsp-scroll-x', function (event, scrollPositionX, isAtLeft, isAtRight) {
      if (isAtRight && drawer.doneLoading) {
        drawer.loadMore(editor, url);
      }
    });
  });

}

FORGE.features.assets.Drawer.prototype.loadMore = function(editor, url) {
  var drawer = this;
  drawer.doneLoading = false;
  drawer.list.append('<li style="text-align: center;"><img src="<%= asset_path 'forge/ajax-loader.gif' %>" alt="Loading..." style="margin-top: 40%;" /></li>')
  drawer.resize();

  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'html',
    data: {offset: drawer.list.find('li').length}, // note the loader LI is included in this list, the math works out
    success: function (data) {
      drawer.list.find('li:last-child').remove();
      drawer.list.append(data);
      drawer.resize();
      drawer.doneLoading = true;
    },
    error: function () {
      alert('Error loading data.');
    }
  });
}

FORGE.features.assets.Drawer.prototype.resize = function () {
  var drawer = this;
  var width = (drawer.list.find('li').size() * 162);
  $('#asset-drawer ul').css('width', width + 'px');
  $('#frame').jScrollPane()
}

FORGE.features.assets.Drawer.prototype.prepareForEditor = function(id) {
  var drawer = this;
  drawer.prepare = $('<div />');
  drawer.prepare.load('/forge/assets/' + id +'/prepare', function() {
    drawer.prepare.dialog({title: 'Prepare Asset', width: 500, close: function() { drawer.prepare.remove(); }});
    drawer.close();
  });
}

FORGE.features.assets.Drawer.prototype.placeAssetInEditor = function(form) {
  var drawer = this;
  drawer.activeEditor.focus();
  editor = FORGE.assetDrawer.activeEditor;
  s = editor.getSelection();
  s.selectRanges(s.getRanges()); // WebKit doesn't seem to focus properly sometimes.
  // WebKit requires manual focus for now :(

  $.ajax({
    url: form.attr('action'),
    type: "GET",
    dataType: 'HTML',
    data: form.serialize(),
    success: function(data) {
      editor = FORGE.assetDrawer.activeEditor;
//      s = editor.getSelection();
//      s.selectRanges(s.getRanges()); // WebKit doesn't seem to focus properly sometimes.
      editor.insertHtml(data);
    },
    error: function() { alert("Error communicating with server, please try again shortly."); }
  });
  drawer.prepare.dialog('close');
}

FORGE.features.assets.Drawer.prototype.attachToObject = function(id, url) {
  var drawer = this;
  var id_field = $('#' + drawer.asset_id_container);
  var url_field = $('#' + drawer.asset_url_container);
  var thumbnail = $('<img />').addClass('form-thumbnail').attr('src', url).css('display', 'none');
  var widget = id_field.closest('div')
  id_field.val(id);
  url_field.val(url);
  widget.find('img').fadeOut(function() {
    $(this).remove();
    widget.prepend(thumbnail);
    thumbnail.fadeIn(function() {
      $('div.column:not([class*=inner])').css('height', 'auto');
      $('div.column:not([class*=inner])').equalHeights()
    });
  });
  drawer.close();

  if (typeof(drawer.dialog) != 'undefined') { drawer.dialog.dialog("close"); }
}

FORGE.features.assets.Drawer.prototype.search = function(query) {
  var drawer = this;
  var url = '/forge/assets/drawer?q=' + query;
  if (typeof drawer.asset_id_container != 'undefined') url += '&single=true';
  $.debounce(600, drawer.load(drawer.activeEditor, url));
}


FORGE.features.assets.Drawer.prototype.init = function() {
  var drawer = this;
  $(document).on('click', '.close-asset-drawer', function(e) {
    drawer.close();
    e.preventDefault();
  });

  $(document).on('submit', '#place-asset', function(e) {
    e.preventDefault();
    drawer.placeAssetInEditor($(this));
  });

  // Open the options dialog
  $(document).on('click', '.prepare-for-editor', function(e) {
    var id = $(this).closest('li').attr('id').replace('asset_', '');
    drawer.prepareForEditor(id);
    e.preventDefault();
  });

  $(document).on('keyup', '#asset-drawer-search', function() {
    var query = $(this).val();
    drawer.search(query);
  });

  $(document).on('click', '.drawer-asset-filter', function(e) { 
    var url = $(this).attr('href');

    if (typeof drawer.asset_id_container != 'undefined') {
      url += ~url.indexOf('?') ? '&' : '?';
      url += 'single=true';
    }

    drawer.load(drawer.activeEditor, url);
    e.preventDefault();
  });

  $('#asset-drawer a, #asset-drawer input').attr('tabindex', '-1');
}