MR.TopicsLinkView = Em.View.extend({
  topic: null,
  tagName: 'li',
  classNames: 'topic link',
  templateName: 'ember/templates/topics/link',
  contextBinding: 'topic',

  didInsertElement: function() {
    this._bindDrag();
    this._bindDrop();
  },

  _bindDrag: function() {
    var $view = this.$();

    $view.draggable({
      helper: function() {
        return $view.emberClone();
      },
      scope: 'reorder-topics'
    });

    $view.bind('dragstart', $.callbackArgs(this._onDragStart, this));
  },

  _bindDrop: function() {
    var $view = this.$();

    $view.droppable({
      scope: 'reorder-topics',
      greedy: true,
      activeClass: 'drag-active',
      hoverClass: 'drag-hover'
    });

    $view.bind('drop', $.callbackArgs(this._onDrop, this));
  },

  _onDragStart: function(event, ui, view) {
    var controller, topic;

    controller = view.get('controller');
    topic = view.get('topic');

    controller.setDraggingTopic(topic);
  },

  _onDrop: function(event, ui, view) {
    var controller, topicBefore;

    controller = view.get('controller');
    topicBefore = view.get('topic');

    controller.saveDraggingAfter(topicBefore);
  }
});