// The "module" exported by this script is called "nglink":

var nglink = function() {

function Link(link_list) {
  
  if(!(this instanceof Link)) {
    return new Link(link_list);
  }
  
  this._link_list = link_list;
  clog("Link setup");
  clog(link_list);
}

/* Creates a POST to /links/id/move. The display_order is the destination */
Link.prototype.move = function(link, bundle, idx_dest) {
  clog("Moving link");
  // clog("In Bundle: " + stopBundle.find("a.data").siblings().html());
  // clog("At index: "  + stopLinkAt);
  // clog(link);

  var bundle_id = bundleId(bundle);
  var display_order = idx_dest + 1;
  var data = link.find("a");
  var rel = data.attr("rel");
  var url = rel + "/move";
  clog("Moving link " + rel + " to bundle: " + bundle_id + " at " + display_order);
  jQuery.post(url, {
     "_method": "post",
     "authenticity_token": form_authenticity_token,
     "display_order": display_order,
     "bundle_id": bundle_id
   },
   function(data, status){
     // clog("Moved link");
     // clog(data);
   });
};

Link.prototype.setup = function() {
  var self = this;
  var startLinkAt, stopLinkAt, startBundle, stopBundle, startLinkList, stopLinkList = null;

  var handle_selector = ".link-handle"
  var sortable_selector = ".sortable-link";
  
  // Set cursor via JS since I can't seem to set the cursor in a stylesheet. 
  jQuery(this._link_list.find(handle_selector)).css("cursor", "move");

  this._link_list.sortable({
    connectWith: '.connected-links',
    items: sortable_selector,
    placeholder: 'ui-state-highlight',
    handle: handle_selector,
    cursor: "move",
    revert: true,

    start: function(event, ui) {
      startLinkList = stopLinkList = linkList(ui.item);
      startLinkAt = stopLinkAt = linkAt(startLinkList, ui.item);
      startBundle = stopBundle = bundleOf(ui.item);
      autofit(ui.placeholder, ui.item);
    },
    
    stop: function(event, ui) {
      stopLinkList = linkList(ui.item);
      stopLinkAt = linkAt(stopLinkList, ui.item);
      stopBundle = bundleOf(ui.item);

      // dispatch call only when the UI changes
      if (!(startLinkAt === stopLinkAt && bundleId(startBundle) === bundleId(stopBundle))) {
        self.move(ui.item, stopBundle, stopLinkAt);
      }
    }
    
    // stop: function(event, ui) {
      // clog("stop");
// Over from: " + startBundle.find("a.data").siblings().html() + " to " + 
      // clog("start: " + startLinkAt + " stop: " + stopLinkAt);
      // clog([startBundle, stopBundle]);
      // if (startLinkAt != stopLinkAt) {
      //   clog("Moved link");
      // }
      // clog("Moving:");
      // clog(startLink);
      // clog(startBundle);
      // clog(stopBundle);
    // }

  });
  this._link_list.disableSelection();
};

/* Autofits the placeholder to the height&width of the item */
function autofit(placeholder, item) {
  jQuery(placeholder).height(item.outerHeight(true)).width(item.outerWidth(true));
}

/* Returns the position of the link within the list */
function linkAt(link_list, sortable_link) {
  return link_list.children().index(sortable_link);
}

/* Returns the bundle DOM obj */
function bundleOf(sortable_link) {
  return sortable_link.parent().parent().parent();
}

/* Returns the link-list */
function linkList(sortable_link) {
  return bundleOf(sortable_link).find("ul.ui-sortable.link-list");
}

function bundleId(sortable_bundle) {
  return sortable_bundle.find("a.data").attr("id");
}

// function bundleAt(sortable_link) {
//   return sortable_link.parent().parent().find("a.data");
// }

// function getBundle(sortable_link) {
//   clog(sortable_link.parent().parent().find("a.data").siblings().html());
//   return sortable_link.parent().parent().find("a.data");
// }

function logBundle(ui) {
  clog(ui);
  clog("Helper: ");
  clog(ui.helper);
  clog("Position: ");
  clog(ui.position);
  clog("Offset: ");
  clog(ui.offset);
  clog("Item: ");
  clog(ui.item);
  clog("PlaceHolder: ");
  clog(ui.placeholder);
  clog("Sender: ");
  clog(ui.sender);
}

return {Link: Link};

}();