pandorafms/pandora_console/include/javascript/gridstack.js

/**
 * gridstack.js 0.3.0
 * http://troolee.github.io/gridstack.js/
 * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
 * gridstack.js may be freely distributed under the MIT license.
 * @preserve
 */
(function(factory) {
  if (typeof define === "function" && define.amd) {
    define(["jquery", "lodash"], factory);
  } else if (typeof exports !== "undefined") {
    try {
      jQuery = require("jquery");
    } catch (e) {}
    try {
      _ = require("lodash");
    } catch (e) {}
    factory(jQuery, _);
  } else {
    factory(jQuery, _);
  }
})(function($, _) {
  var scope = window;

  var obsolete = function(f, oldName, newName) {
    var wrapper = function() {
      console.warn(
        "gridstack.js: Function `" +
          oldName +
          "` is deprecated as of v0.2.5 and has been replaced " +
          "with `" +
          newName +
          "`. It will be **completely** removed in v1.0."
      );
      return f.apply(this, arguments);
    };
    wrapper.prototype = f.prototype;

    return wrapper;
  };

  var obsoleteOpts = function(oldName, newName) {
    console.warn(
      "gridstack.js: Option `" +
        oldName +
        "` is deprecated as of v0.2.5 and has been replaced with `" +
        newName +
        "`. It will be **completely** removed in v1.0."
    );
  };

  var Utils = {
    isIntercepted: function(a, b) {
      return !(
        a.x + a.width <= b.x ||
        b.x + b.width <= a.x ||
        a.y + a.height <= b.y ||
        b.y + b.height <= a.y
      );
    },

    sort: function(nodes, dir, width) {
      width =
        width ||
        _.chain(nodes)
          .map(function(node) {
            return node.x + node.width;
          })
          .max()
          .value();
      dir = dir != -1 ? 1 : -1;
      return _.sortBy(nodes, function(n) {
        return dir * (n.x + n.y * width);
      });
    },

    createStylesheet: function(id) {
      var style = document.createElement("style");
      style.setAttribute("type", "text/css");
      style.setAttribute("data-gs-style-id", id);
      if (style.styleSheet) {
        style.styleSheet.cssText = "";
      } else {
        style.appendChild(document.createTextNode(""));
      }
      document.getElementsByTagName("head")[0].appendChild(style);
      return style.sheet;
    },

    removeStylesheet: function(id) {
      $("STYLE[data-gs-style-id=" + id + "]").remove();
    },

    insertCSSRule: function(sheet, selector, rules, index) {
      if (typeof sheet.insertRule === "function") {
        sheet.insertRule(selector + "{" + rules + "}", index);
      } else if (typeof sheet.addRule === "function") {
        sheet.addRule(selector, rules, index);
      }
    },

    toBool: function(v) {
      if (typeof v == "boolean") {
        return v;
      }
      if (typeof v == "string") {
        v = v.toLowerCase();
        return !(v === "" || v == "no" || v == "false" || v == "0");
      }
      return Boolean(v);
    },

    _collisionNodeCheck: function(n) {
      return n != this.node && Utils.isIntercepted(n, this.nn);
    },

    _didCollide: function(bn) {
      return Utils.isIntercepted(
        {
          x: this.n.x,
          y: this.newY,
          width: this.n.width,
          height: this.n.height
        },
        bn
      );
    },

    _isAddNodeIntercepted: function(n) {
      return Utils.isIntercepted(
        {
          x: this.x,
          y: this.y,
          width: this.node.width,
          height: this.node.height
        },
        n
      );
    },

    parseHeight: function(val) {
      var height = val;
      var heightUnit = "px";
      if (height && _.isString(height)) {
        var match = height.match(
          /^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw)?$/
        );
        if (!match) {
          throw new Error("Invalid height");
        }
        heightUnit = match[2] || "px";
        height = parseFloat(match[1]);
      }
      return { height: height, unit: heightUnit };
    }
  };

  // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
  Utils.is_intercepted = obsolete(
    Utils.isIntercepted,
    "is_intercepted",
    "isIntercepted"
  );

  Utils.create_stylesheet = obsolete(
    Utils.createStylesheet,
    "create_stylesheet",
    "createStylesheet"
  );

  Utils.remove_stylesheet = obsolete(
    Utils.removeStylesheet,
    "remove_stylesheet",
    "removeStylesheet"
  );

  Utils.insert_css_rule = obsolete(
    Utils.insertCSSRule,
    "insert_css_rule",
    "insertCSSRule"
  );
  // jscs:enable requireCamelCaseOrUpperCaseIdentifiers

  /**
   * @class GridStackDragDropPlugin
   * Base class for drag'n'drop plugin.
   */
  function GridStackDragDropPlugin(grid) {
    this.grid = grid;
  }

  GridStackDragDropPlugin.registeredPlugins = [];

  GridStackDragDropPlugin.registerPlugin = function(pluginClass) {
    GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
  };

  GridStackDragDropPlugin.prototype.resizable = function(el, opts) {
    return this;
  };

  GridStackDragDropPlugin.prototype.draggable = function(el, opts) {
    return this;
  };

  GridStackDragDropPlugin.prototype.droppable = function(el, opts) {
    return this;
  };

  GridStackDragDropPlugin.prototype.isDroppable = function(el) {
    return false;
  };

  GridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
    return this;
  };

  var idSeq = 0;

  var GridStackEngine = function(width, onchange, floatMode, height, items) {
    this.width = width;
    this.float = floatMode || false;
    this.height = height || 0;

    this.nodes = items || [];
    this.onchange = onchange || function() {};

    this._updateCounter = 0;
    this._float = this.float;

    this._addedNodes = [];
    this._removedNodes = [];
  };

  GridStackEngine.prototype.batchUpdate = function() {
    this._updateCounter = 1;
    this.float = true;
  };

  GridStackEngine.prototype.commit = function() {
    if (this._updateCounter !== 0) {
      this._updateCounter = 0;
      this.float = this._float;
      this._packNodes();
      this._notify();
    }
  };

  // For Meteor support: https://github.com/troolee/gridstack.js/pull/272
  GridStackEngine.prototype.getNodeDataByDOMEl = function(el) {
    return _.find(this.nodes, function(n) {
      return el.get(0) === n.el.get(0);
    });
  };

  GridStackEngine.prototype._fixCollisions = function(node) {
    var self = this;
    this._sortNodes(-1);

    var nn = node;
    var hasLocked = Boolean(
      _.find(this.nodes, function(n) {
        return n.locked;
      })
    );
    if (!this.float && !hasLocked) {
      nn = { x: 0, y: node.y, width: this.width, height: node.height };
    }
    while (true) {
      var collisionNode = _.find(
        this.nodes,
        _.bind(Utils._collisionNodeCheck, { node: node, nn: nn })
      );
      if (typeof collisionNode == "undefined") {
        return;
      }
      this.moveNode(
        collisionNode,
        collisionNode.x,
        node.y + node.height,
        collisionNode.width,
        collisionNode.height,
        true
      );
    }
  };

  GridStackEngine.prototype.isAreaEmpty = function(x, y, width, height) {
    var nn = { x: x || 0, y: y || 0, width: width || 1, height: height || 1 };
    var collisionNode = _.find(
      this.nodes,
      _.bind(function(n) {
        return Utils.isIntercepted(n, nn);
      }, this)
    );
    return collisionNode === null || typeof collisionNode === "undefined";
  };

  GridStackEngine.prototype._sortNodes = function(dir) {
    this.nodes = Utils.sort(this.nodes, dir, this.width);
  };

  GridStackEngine.prototype._packNodes = function() {
    this._sortNodes();

    if (this.float) {
      _.each(
        this.nodes,
        _.bind(function(n, i) {
          if (
            n._updating ||
            typeof n._origY == "undefined" ||
            n.y == n._origY
          ) {
            return;
          }

          var newY = n.y;
          while (newY >= n._origY) {
            var collisionNode = _.chain(this.nodes)
              .find(_.bind(Utils._didCollide, { n: n, newY: newY }))
              .value();

            if (!collisionNode) {
              n._dirty = true;
              n.y = newY;
            }
            --newY;
          }
        }, this)
      );
    } else {
      _.each(
        this.nodes,
        _.bind(function(n, i) {
          if (n.locked) {
            return;
          }
          while (n.y > 0) {
            var newY = n.y - 1;
            var canBeMoved = i === 0;

            if (i > 0) {
              var collisionNode = _.chain(this.nodes)
                .take(i)
                .find(_.bind(Utils._didCollide, { n: n, newY: newY }))
                .value();
              canBeMoved = typeof collisionNode == "undefined";
            }

            if (!canBeMoved) {
              break;
            }
            n._dirty = n.y != newY;
            n.y = newY;
          }
        }, this)
      );
    }
  };

  GridStackEngine.prototype._prepareNode = function(node, resizing) {
    node = _.defaults(node || {}, { width: 1, height: 1, x: 0, y: 0 });

    node.x = parseInt("" + node.x);
    node.y = parseInt("" + node.y);
    node.width = parseInt("" + node.width);
    node.height = parseInt("" + node.height);
    node.autoPosition = node.autoPosition || false;
    node.noResize = node.noResize || false;
    node.noMove = node.noMove || false;

    if (node.width > this.width) {
      node.width = this.width;
    } else if (node.width < 1) {
      node.width = 1;
    }

    if (node.height < 1) {
      node.height = 1;
    }

    if (node.x < 0) {
      node.x = 0;
    }

    if (node.x + node.width > this.width) {
      if (resizing) {
        node.width = this.width - node.x;
      } else {
        node.x = this.width - node.width;
      }
    }

    if (node.y < 0) {
      node.y = 0;
    }

    return node;
  };

  GridStackEngine.prototype._notify = function() {
    var args = Array.prototype.slice.call(arguments, 0);
    args[0] = typeof args[0] === "undefined" ? [] : [args[0]];
    args[1] = typeof args[1] === "undefined" ? true : args[1];
    if (this._updateCounter) {
      return;
    }
    var deletedNodes = args[0].concat(this.getDirtyNodes());
    this.onchange(deletedNodes, args[1]);
  };

  GridStackEngine.prototype.cleanNodes = function() {
    if (this._updateCounter) {
      return;
    }
    _.each(this.nodes, function(n) {
      n._dirty = false;
    });
  };

  GridStackEngine.prototype.getDirtyNodes = function() {
    return _.filter(this.nodes, function(n) {
      return n._dirty;
    });
  };

  GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
    node = this._prepareNode(node);

    if (typeof node.maxWidth != "undefined") {
      node.width = Math.min(node.width, node.maxWidth);
    }
    if (typeof node.maxHeight != "undefined") {
      node.height = Math.min(node.height, node.maxHeight);
    }
    if (typeof node.minWidth != "undefined") {
      node.width = Math.max(node.width, node.minWidth);
    }
    if (typeof node.minHeight != "undefined") {
      node.height = Math.max(node.height, node.minHeight);
    }

    node._id = ++idSeq;
    node._dirty = true;

    if (node.autoPosition) {
      this._sortNodes();

      for (var i = 0; ; ++i) {
        var x = i % this.width;
        var y = Math.floor(i / this.width);
        if (x + node.width > this.width) {
          continue;
        }
        if (
          !_.find(
            this.nodes,
            _.bind(Utils._isAddNodeIntercepted, { x: x, y: y, node: node })
          )
        ) {
          node.x = x;
          node.y = y;
          break;
        }
      }
    }

    this.nodes.push(node);
    if (typeof triggerAddEvent != "undefined" && triggerAddEvent) {
      this._addedNodes.push(_.clone(node));
    }

    this._fixCollisions(node);
    this._packNodes();
    this._notify();
    return node;
  };

  GridStackEngine.prototype.removeNode = function(node, detachNode) {
    detachNode = typeof detachNode === "undefined" ? true : detachNode;
    this._removedNodes.push(_.clone(node));
    node._id = null;
    this.nodes = _.without(this.nodes, node);
    this._packNodes();
    this._notify(node, detachNode);
  };

  GridStackEngine.prototype.canMoveNode = function(node, x, y, width, height) {
    if (!this.isNodeChangedPosition(node, x, y, width, height)) {
      return false;
    }
    var hasLocked = Boolean(
      _.find(this.nodes, function(n) {
        return n.locked;
      })
    );

    if (!this.height && !hasLocked) {
      return true;
    }

    var clonedNode;
    var clone = new GridStackEngine(
      this.width,
      null,
      this.float,
      0,
      _.map(this.nodes, function(n) {
        if (n == node) {
          clonedNode = $.extend({}, n);
          return clonedNode;
        }
        return $.extend({}, n);
      })
    );

    if (typeof clonedNode === "undefined") {
      return true;
    }

    clone.moveNode(clonedNode, x, y, width, height);

    var res = true;

    if (hasLocked) {
      res &= !Boolean(
        _.find(clone.nodes, function(n) {
          return n != clonedNode && Boolean(n.locked) && Boolean(n._dirty);
        })
      );
    }
    if (this.height) {
      res &= clone.getGridHeight() <= this.height;
    }

    return res;
  };

  GridStackEngine.prototype.canBePlacedWithRespectToHeight = function(node) {
    if (!this.height) {
      return true;
    }

    var clone = new GridStackEngine(
      this.width,
      null,
      this.float,
      0,
      _.map(this.nodes, function(n) {
        return $.extend({}, n);
      })
    );
    clone.addNode(node);
    return clone.getGridHeight() <= this.height;
  };

  GridStackEngine.prototype.isNodeChangedPosition = function(
    node,
    x,
    y,
    width,
    height
  ) {
    if (typeof x != "number") {
      x = node.x;
    }
    if (typeof y != "number") {
      y = node.y;
    }
    if (typeof width != "number") {
      width = node.width;
    }
    if (typeof height != "number") {
      height = node.height;
    }

    if (typeof node.maxWidth != "undefined") {
      width = Math.min(width, node.maxWidth);
    }
    if (typeof node.maxHeight != "undefined") {
      height = Math.min(height, node.maxHeight);
    }
    if (typeof node.minWidth != "undefined") {
      width = Math.max(width, node.minWidth);
    }
    if (typeof node.minHeight != "undefined") {
      height = Math.max(height, node.minHeight);
    }

    if (
      node.x == x &&
      node.y == y &&
      node.width == width &&
      node.height == height
    ) {
      return false;
    }
    return true;
  };

  GridStackEngine.prototype.moveNode = function(
    node,
    x,
    y,
    width,
    height,
    noPack
  ) {
    if (!this.isNodeChangedPosition(node, x, y, width, height)) {
      return node;
    }
    if (typeof x != "number") {
      x = node.x;
    }
    if (typeof y != "number") {
      y = node.y;
    }
    if (typeof width != "number") {
      width = node.width;
    }
    if (typeof height != "number") {
      height = node.height;
    }

    if (typeof node.maxWidth != "undefined") {
      width = Math.min(width, node.maxWidth);
    }
    if (typeof node.maxHeight != "undefined") {
      height = Math.min(height, node.maxHeight);
    }
    if (typeof node.minWidth != "undefined") {
      width = Math.max(width, node.minWidth);
    }
    if (typeof node.minHeight != "undefined") {
      height = Math.max(height, node.minHeight);
    }

    if (
      node.x == x &&
      node.y == y &&
      node.width == width &&
      node.height == height
    ) {
      return node;
    }

    var resizing = node.width != width;
    node._dirty = true;

    node.x = x;
    node.y = y;
    node.width = width;
    node.height = height;

    node.lastTriedX = x;
    node.lastTriedY = y;
    node.lastTriedWidth = width;
    node.lastTriedHeight = height;

    node = this._prepareNode(node, resizing);

    this._fixCollisions(node);
    if (!noPack) {
      this._packNodes();
      this._notify();
    }
    return node;
  };

  GridStackEngine.prototype.getGridHeight = function() {
    return _.reduce(
      this.nodes,
      function(memo, n) {
        return Math.max(memo, n.y + n.height);
      },
      0
    );
  };

  GridStackEngine.prototype.beginUpdate = function(node) {
    _.each(this.nodes, function(n) {
      n._origY = n.y;
    });
    node._updating = true;
  };

  GridStackEngine.prototype.endUpdate = function() {
    _.each(this.nodes, function(n) {
      n._origY = n.y;
    });
    var n = _.find(this.nodes, function(n) {
      return n._updating;
    });
    if (n) {
      n._updating = false;
    }
  };

  var GridStack = function(el, opts) {
    var self = this;
    var oneColumnMode, isAutoCellHeight;

    opts = opts || {};

    this.container = $(el);

    // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
    if (typeof opts.handle_class !== "undefined") {
      opts.handleClass = opts.handle_class;
      obsoleteOpts("handle_class", "handleClass");
    }
    if (typeof opts.item_class !== "undefined") {
      opts.itemClass = opts.item_class;
      obsoleteOpts("item_class", "itemClass");
    }
    if (typeof opts.placeholder_class !== "undefined") {
      opts.placeholderClass = opts.placeholder_class;
      obsoleteOpts("placeholder_class", "placeholderClass");
    }
    if (typeof opts.placeholder_text !== "undefined") {
      opts.placeholderText = opts.placeholder_text;
      obsoleteOpts("placeholder_text", "placeholderText");
    }
    if (typeof opts.cell_height !== "undefined") {
      opts.cellHeight = opts.cell_height;
      obsoleteOpts("cell_height", "cellHeight");
    }
    if (typeof opts.vertical_margin !== "undefined") {
      opts.verticalMargin = opts.vertical_margin;
      obsoleteOpts("vertical_margin", "verticalMargin");
    }
    if (typeof opts.min_width !== "undefined") {
      opts.minWidth = opts.min_width;
      obsoleteOpts("min_width", "minWidth");
    }
    if (typeof opts.static_grid !== "undefined") {
      opts.staticGrid = opts.static_grid;
      obsoleteOpts("static_grid", "staticGrid");
    }
    if (typeof opts.is_nested !== "undefined") {
      opts.isNested = opts.is_nested;
      obsoleteOpts("is_nested", "isNested");
    }
    if (typeof opts.always_show_resize_handle !== "undefined") {
      opts.alwaysShowResizeHandle = opts.always_show_resize_handle;
      obsoleteOpts("always_show_resize_handle", "alwaysShowResizeHandle");
    }
    // jscs:enable requireCamelCaseOrUpperCaseIdentifiers

    opts.itemClass = opts.itemClass || "grid-stack-item";
    var isNested = this.container.closest("." + opts.itemClass).length > 0;

    this.opts = _.defaults(opts || {}, {
      width: parseInt(this.container.attr("data-gs-width")) || 12,
      height: parseInt(this.container.attr("data-gs-height")) || 0,
      itemClass: "grid-stack-item",
      placeholderClass: "grid-stack-placeholder",
      placeholderText: "",
      handle: ".grid-stack-item-content",
      handleClass: null,
      cellHeight: 60,
      verticalMargin: 20,
      auto: true,
      minWidth: 768,
      float: false,
      staticGrid: false,
      _class: "grid-stack-instance-" + (Math.random() * 10000).toFixed(0),
      animate: Boolean(this.container.attr("data-gs-animate")) || false,
      alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
      resizable: _.defaults(opts.resizable || {}, {
        autoHide: !(opts.alwaysShowResizeHandle || false),
        handles: "se"
      }),
      draggable: _.defaults(opts.draggable || {}, {
        handle:
          (opts.handleClass
            ? "." + opts.handleClass
            : opts.handle
            ? opts.handle
            : "") || ".grid-stack-item-content",
        scroll: false,
        appendTo: "body"
      }),
      disableDrag: opts.disableDrag || false,
      disableResize: opts.disableResize || false,
      rtl: "auto",
      removable: false,
      removeTimeout: 2000,
      verticalMarginUnit: "px",
      cellHeightUnit: "px",
      disableOneColumnMode: opts.disableOneColumnMode || false,
      oneColumnModeClass:
        opts.oneColumnModeClass || "grid-stack-one-column-mode",
      ddPlugin: null
    });

    if (this.opts.ddPlugin === false) {
      this.opts.ddPlugin = GridStackDragDropPlugin;
    } else if (this.opts.ddPlugin === null) {
      this.opts.ddPlugin =
        _.first(GridStackDragDropPlugin.registeredPlugins) ||
        GridStackDragDropPlugin;
    }

    this.dd = new this.opts.ddPlugin(this);

    if (this.opts.rtl === "auto") {
      this.opts.rtl = this.container.css("direction") === "rtl";
    }

    if (this.opts.rtl) {
      this.container.addClass("grid-stack-rtl");
    }

    this.opts.isNested = isNested;

    isAutoCellHeight = this.opts.cellHeight === "auto";
    if (isAutoCellHeight) {
      self.cellHeight(self.cellWidth(), true);
    } else {
      this.cellHeight(this.opts.cellHeight, true);
    }
    this.verticalMargin(this.opts.verticalMargin, true);

    this.container.addClass(this.opts._class);

    this._setStaticClass();

    if (isNested) {
      this.container.addClass("grid-stack-nested");
    }

    this._initStyles();

    this.grid = new GridStackEngine(
      this.opts.width,
      function(nodes, detachNode) {
        detachNode = typeof detachNode === "undefined" ? true : detachNode;
        var maxHeight = 0;
        _.each(nodes, function(n) {
          if (detachNode && n._id === null) {
            if (n.el) {
              n.el.remove();
            }
          } else {
            n.el
              .attr("data-gs-x", n.x)
              .attr("data-gs-y", n.y)
              .attr("data-gs-width", n.width)
              .attr("data-gs-height", n.height);
            maxHeight = Math.max(maxHeight, n.y + n.height);
          }
        });
        self._updateStyles(maxHeight + 10);
      },
      this.opts.float,
      this.opts.height
    );

    if (this.opts.auto) {
      var elements = [];
      var _this = this;
      this.container
        .children(
          "." +
            this.opts.itemClass +
            ":not(." +
            this.opts.placeholderClass +
            ")"
        )
        .each(function(index, el) {
          el = $(el);
          elements.push({
            el: el,
            i:
              parseInt(el.attr("data-gs-x")) +
              parseInt(el.attr("data-gs-y")) * _this.opts.width
          });
        });
      _.chain(elements)
        .sortBy(function(x) {
          return x.i;
        })
        .each(function(i) {
          self._prepareElement(i.el);
        })
        .value();
    }

    this.setAnimation(this.opts.animate);

    this.placeholder = $(
      '<div class="' +
        this.opts.placeholderClass +
        " " +
        this.opts.itemClass +
        '">' +
        '<div class="placeholder-content">' +
        this.opts.placeholderText +
        "</div></div>"
    ).hide();

    this._updateContainerHeight();

    this._updateHeightsOnResize = _.throttle(function() {
      self.cellHeight(self.cellWidth(), false);
    }, 100);

    this.onResizeHandler = function() {
      if (isAutoCellHeight) {
        self._updateHeightsOnResize();
      }

      if (self._isOneColumnMode() && !self.opts.disableOneColumnMode) {
        if (oneColumnMode) {
          return;
        }
        self.container.addClass(self.opts.oneColumnModeClass);
        oneColumnMode = true;

        self.grid._sortNodes();
        _.each(self.grid.nodes, function(node) {
          self.container.append(node.el);

          if (self.opts.staticGrid) {
            return;
          }
          self.dd.draggable(node.el, "disable");
          self.dd.resizable(node.el, "disable");

          node.el.trigger("resize");
        });
      } else {
        if (!oneColumnMode) {
          return;
        }

        self.container.removeClass(self.opts.oneColumnModeClass);
        oneColumnMode = false;

        if (self.opts.staticGrid) {
          return;
        }

        _.each(self.grid.nodes, function(node) {
          if (!node.noMove && !self.opts.disableDrag) {
            self.dd.draggable(node.el, "enable");
          }
          if (!node.noResize && !self.opts.disableResize) {
            self.dd.resizable(node.el, "enable");
          }

          node.el.trigger("resize");
        });
      }
    };

    $(window).resize(this.onResizeHandler);
    this.onResizeHandler();

    if (!self.opts.staticGrid && typeof self.opts.removable === "string") {
      var trashZone = $(self.opts.removable);
      if (!this.dd.isDroppable(trashZone)) {
        this.dd.droppable(trashZone, {
          accept: "." + self.opts.itemClass
        });
      }
      this.dd
        .on(trashZone, "dropover", function(event, ui) {
          var el = $(ui.draggable);
          var node = el.data("_gridstack_node");
          if (node._grid !== self) {
            return;
          }
          self._setupRemovingTimeout(el);
        })
        .on(trashZone, "dropout", function(event, ui) {
          var el = $(ui.draggable);
          var node = el.data("_gridstack_node");
          if (node._grid !== self) {
            return;
          }
          self._clearRemovingTimeout(el);
        });
    }

    if (!self.opts.staticGrid && self.opts.acceptWidgets) {
      var draggingElement = null;

      var onDrag = function(event, ui) {
        var el = draggingElement;
        var node = el.data("_gridstack_node");
        var pos = self.getCellFromPixel(ui.offset, true);
        var x = Math.max(0, pos.x);
        var y = Math.max(0, pos.y);
        if (!node._added) {
          node._added = true;

          node.el = el;
          node.x = x;
          node.y = y;
          self.grid.cleanNodes();
          self.grid.beginUpdate(node);
          self.grid.addNode(node);

          self.container.append(self.placeholder);
          self.placeholder
            .attr("data-gs-x", node.x)
            .attr("data-gs-y", node.y)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height)
            .show();
          node.el = self.placeholder;
          node._beforeDragX = node.x;
          node._beforeDragY = node.y;

          self._updateContainerHeight();
        } else {
          if (!self.grid.canMoveNode(node, x, y)) {
            return;
          }
          self.grid.moveNode(node, x, y);
          self._updateContainerHeight();
        }
      };

      this.dd
        .droppable(self.container, {
          accept: function(el) {
            el = $(el);
            var node = el.data("_gridstack_node");
            if (node && node._grid === self) {
              return false;
            }
            return el.is(
              self.opts.acceptWidgets === true
                ? ".grid-stack-item"
                : self.opts.acceptWidgets
            );
          }
        })
        .on(self.container, "dropover", function(event, ui) {
          var offset = self.container.offset();
          var el = $(ui.draggable);
          var cellWidth = self.cellWidth();
          var cellHeight = self.cellHeight();
          var origNode = el.data("_gridstack_node");

          var width = origNode
            ? origNode.width
            : Math.ceil(el.outerWidth() / cellWidth);
          var height = origNode
            ? origNode.height
            : Math.ceil(el.outerHeight() / cellHeight);

          draggingElement = el;

          var node = self.grid._prepareNode({
            width: width,
            height: height,
            _added: false,
            _temporary: true
          });
          el.data("_gridstack_node", node);
          el.data("_gridstack_node_orig", origNode);

          el.on("drag", onDrag);
        })
        .on(self.container, "dropout", function(event, ui) {
          var el = $(ui.draggable);
          el.unbind("drag", onDrag);
          var node = el.data("_gridstack_node");
          node.el = null;
          self.grid.removeNode(node);
          self.placeholder.detach();
          self._updateContainerHeight();
          el.data("_gridstack_node", el.data("_gridstack_node_orig"));
        })
        .on(self.container, "drop", function(event, ui) {
          self.placeholder.detach();

          var node = $(ui.draggable).data("_gridstack_node");
          node._grid = self;
          var el = $(ui.draggable).clone(false);
          el.data("_gridstack_node", node);
          var originalNode = $(ui.draggable).data("_gridstack_node_orig");
          if (typeof originalNode !== "undefined") {
            originalNode._grid._triggerRemoveEvent();
          }
          $(ui.draggable).remove();
          node.el = el;
          self.placeholder.hide();
          el.attr("data-gs-x", node.x)
            .attr("data-gs-y", node.y)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height)
            .addClass(self.opts.itemClass)
            .removeAttr("style")
            .enableSelection()
            .removeData("draggable")
            .removeClass(
              "ui-draggable ui-draggable-dragging ui-draggable-disabled"
            )
            .unbind("drag", onDrag);
          self.container.append(el);
          self._prepareElementsByNode(el, node);
          self._updateContainerHeight();
          self.grid._addedNodes.push(node);
          self._triggerAddEvent();
          self._triggerChangeEvent();

          self.grid.endUpdate();
        });
    }
  };

  GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
    var elements = this.grid.getDirtyNodes();
    var hasChanges = false;

    var eventParams = [];
    if (elements && elements.length) {
      eventParams.push(elements);
      hasChanges = true;
    }

    if (hasChanges || forceTrigger === true) {
      this.container.trigger("change", eventParams);
    }
  };

  GridStack.prototype._triggerAddEvent = function() {
    if (this.grid._addedNodes && this.grid._addedNodes.length > 0) {
      this.container.trigger("added", [_.map(this.grid._addedNodes, _.clone)]);
      this.grid._addedNodes = [];
    }
  };

  GridStack.prototype._triggerRemoveEvent = function() {
    if (this.grid._removedNodes && this.grid._removedNodes.length > 0) {
      this.container.trigger("removed", [
        _.map(this.grid._removedNodes, _.clone)
      ]);
      this.grid._removedNodes = [];
    }
  };

  GridStack.prototype._initStyles = function() {
    if (this._stylesId) {
      Utils.removeStylesheet(this._stylesId);
    }
    this._stylesId = "gridstack-style-" + (Math.random() * 100000).toFixed();
    this._styles = Utils.createStylesheet(this._stylesId);
    if (this._styles !== null) {
      this._styles._max = 0;
    }
  };

  GridStack.prototype._updateStyles = function(maxHeight) {
    if (this._styles === null || typeof this._styles === "undefined") {
      return;
    }

    var prefix = "." + this.opts._class + " ." + this.opts.itemClass;
    var self = this;
    var getHeight;

    if (typeof maxHeight == "undefined") {
      maxHeight = this._styles._max;
    }
    this._initStyles();
    this._updateContainerHeight();
    if (!this.opts.cellHeight) {
      // The rest will be handled by CSS
      return;
    }
    if (this._styles._max !== 0 && maxHeight <= this._styles._max) {
      return;
    }

    if (
      !this.opts.verticalMargin ||
      this.opts.cellHeightUnit === this.opts.verticalMarginUnit
    ) {
      getHeight = function(nbRows, nbMargins) {
        return (
          self.opts.cellHeight * nbRows +
          self.opts.verticalMargin * nbMargins +
          self.opts.cellHeightUnit
        );
      };
    } else {
      getHeight = function(nbRows, nbMargins) {
        if (!nbRows || !nbMargins) {
          return (
            self.opts.cellHeight * nbRows +
            self.opts.verticalMargin * nbMargins +
            self.opts.cellHeightUnit
          );
        }
        return (
          "calc(" +
          (self.opts.cellHeight * nbRows + self.opts.cellHeightUnit) +
          " + " +
          (self.opts.verticalMargin * nbMargins +
            self.opts.verticalMarginUnit) +
          ")"
        );
      };
    }

    if (this._styles._max === 0) {
      Utils.insertCSSRule(
        this._styles,
        prefix,
        "min-height: " + getHeight(1, 0) + ";",
        0
      );
    }

    if (maxHeight > this._styles._max) {
      for (var i = this._styles._max; i < maxHeight; ++i) {
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-height="' + (i + 1) + '"]',
          "height: " + getHeight(i + 1, i) + ";",
          i
        );
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-min-height="' + (i + 1) + '"]',
          "min-height: " + getHeight(i + 1, i) + ";",
          i
        );
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-max-height="' + (i + 1) + '"]',
          "max-height: " + getHeight(i + 1, i) + ";",
          i
        );
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-y="' + i + '"]',
          "top: " + getHeight(i, i) + ";",
          i
        );
      }
      this._styles._max = maxHeight;
    }
  };

  GridStack.prototype._updateContainerHeight = function() {
    if (this.grid._updateCounter) {
      return;
    }
    var height = this.grid.getGridHeight();
    this.container.attr("data-gs-current-height", height);
    if (!this.opts.cellHeight) {
      return;
    }
    if (!this.opts.verticalMargin) {
      this.container.css(
        "height",
        height * this.opts.cellHeight + this.opts.cellHeightUnit
      );
    } else if (this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
      this.container.css(
        "height",
        height * (this.opts.cellHeight + this.opts.verticalMargin) -
          this.opts.verticalMargin +
          this.opts.cellHeightUnit
      );
    } else {
      this.container.css(
        "height",
        "calc(" +
          (height * this.opts.cellHeight + this.opts.cellHeightUnit) +
          " + " +
          (height * (this.opts.verticalMargin - 1) +
            this.opts.verticalMarginUnit) +
          ")"
      );
    }
  };

  GridStack.prototype._isOneColumnMode = function() {
    return (
      (window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth) <= this.opts.minWidth
    );
  };

  GridStack.prototype._setupRemovingTimeout = function(el) {
    var self = this;
    var node = $(el).data("_gridstack_node");

    if (node._removeTimeout || !self.opts.removable) {
      return;
    }
    node._removeTimeout = setTimeout(function() {
      el.addClass("grid-stack-item-removing");
      node._isAboutToRemove = true;
    }, self.opts.removeTimeout);
  };

  GridStack.prototype._clearRemovingTimeout = function(el) {
    var node = $(el).data("_gridstack_node");

    if (!node._removeTimeout) {
      return;
    }
    clearTimeout(node._removeTimeout);
    node._removeTimeout = null;
    el.removeClass("grid-stack-item-removing");
    node._isAboutToRemove = false;
  };

  GridStack.prototype._prepareElementsByNode = function(el, node) {
    var self = this;

    var cellWidth;
    var cellHeight;

    var dragOrResize = function(event, ui) {
      var x = Math.round(ui.position.left / cellWidth);
      var y = Math.floor((ui.position.top + cellHeight / 2) / cellHeight);
      var width;
      var height;

      if (event.type != "drag") {
        width = Math.round(ui.size.width / cellWidth);
        height = Math.round(ui.size.height / cellHeight);
      }

      if (event.type == "drag") {
        if (
          x < 0 ||
          x >= self.grid.width ||
          y < 0 ||
          (!self.grid.float && y > self.grid.getGridHeight())
        ) {
          if (!node._temporaryRemoved) {
            if (self.opts.removable === true) {
              self._setupRemovingTimeout(el);
            }

            x = node._beforeDragX;
            y = node._beforeDragY;

            self.placeholder.detach();
            self.placeholder.hide();
            self.grid.removeNode(node);
            self._updateContainerHeight();

            node._temporaryRemoved = true;
          }
        } else {
          self._clearRemovingTimeout(el);

          if (node._temporaryRemoved) {
            self.grid.addNode(node);
            self.placeholder
              .attr("data-gs-x", x)
              .attr("data-gs-y", y)
              .attr("data-gs-width", width)
              .attr("data-gs-height", height)
              .show();
            self.container.append(self.placeholder);
            node.el = self.placeholder;
            node._temporaryRemoved = false;
          }
        }
      } else if (event.type == "resize") {
        if (x < 0) {
          return;
        }
      }
      // width and height are undefined if not resizing
      var lastTriedWidth =
        typeof width !== "undefined" ? width : node.lastTriedWidth;
      var lastTriedHeight =
        typeof height !== "undefined" ? height : node.lastTriedHeight;
      if (
        !self.grid.canMoveNode(node, x, y, width, height) ||
        (node.lastTriedX === x &&
          node.lastTriedY === y &&
          node.lastTriedWidth === lastTriedWidth &&
          node.lastTriedHeight === lastTriedHeight)
      ) {
        return;
      }
      node.lastTriedX = x;
      node.lastTriedY = y;
      node.lastTriedWidth = width;
      node.lastTriedHeight = height;
      self.grid.moveNode(node, x, y, width, height);
      self._updateContainerHeight();
    };

    var onStartMoving = function(event, ui) {
      self.container.append(self.placeholder);
      var o = $(this);
      self.grid.cleanNodes();
      self.grid.beginUpdate(node);
      cellWidth = self.cellWidth();
      var strictCellHeight = Math.ceil(
        o.outerHeight() / o.attr("data-gs-height")
      );
      cellHeight =
        self.container.height() /
        parseInt(self.container.attr("data-gs-current-height"));
      self.placeholder
        .attr("data-gs-x", o.attr("data-gs-x"))
        .attr("data-gs-y", o.attr("data-gs-y"))
        .attr("data-gs-width", o.attr("data-gs-width"))
        .attr("data-gs-height", o.attr("data-gs-height"))
        .show();
      node.el = self.placeholder;
      node._beforeDragX = node.x;
      node._beforeDragY = node.y;

      self.dd.resizable(
        el,
        "option",
        "minWidth",
        cellWidth * (node.minWidth || 1)
      );
      self.dd.resizable(
        el,
        "option",
        "minHeight",
        strictCellHeight * (node.minHeight || 1)
      );

      if (event.type == "resizestart") {
        o.find(".grid-stack-item").trigger("resizestart");
      }
    };

    var onEndMoving = function(event, ui) {
      var o = $(this);
      if (!o.data("_gridstack_node")) {
        return;
      }

      var forceNotify = false;
      self.placeholder.detach();
      node.el = o;
      self.placeholder.hide();

      if (node._isAboutToRemove) {
        forceNotify = true;
        var gridToNotify = el.data("_gridstack_node")._grid;
        gridToNotify._triggerRemoveEvent();
        el.removeData("_gridstack_node");
        el.remove();
      } else {
        self._clearRemovingTimeout(el);
        if (!node._temporaryRemoved) {
          o.attr("data-gs-x", node.x)
            .attr("data-gs-y", node.y)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height)
            .removeAttr("style");
        } else {
          o.attr("data-gs-x", node._beforeDragX)
            .attr("data-gs-y", node._beforeDragY)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height)
            .removeAttr("style");
          node.x = node._beforeDragX;
          node.y = node._beforeDragY;
          self.grid.addNode(node);
        }
      }
      self._updateContainerHeight();
      self._triggerChangeEvent(forceNotify);

      self.grid.endUpdate();

      var nestedGrids = o.find(".grid-stack");
      if (nestedGrids.length && event.type == "resizestop") {
        nestedGrids.each(function(index, el) {
          $(el)
            .data("gridstack")
            .onResizeHandler();
        });
        o.find(".grid-stack-item").trigger("resizestop");
        o.find(".grid-stack-item").trigger("gsresizestop");
      }
      if (event.type == "resizestop") {
        self.container.trigger("gsresizestop", o);
      }
    };

    this.dd
      .draggable(el, {
        start: onStartMoving,
        stop: onEndMoving,
        drag: dragOrResize
      })
      .resizable(el, {
        start: onStartMoving,
        stop: onEndMoving,
        resize: dragOrResize
      });

    if (
      node.noMove ||
      (this._isOneColumnMode() && !self.opts.disableOneColumnMode) ||
      this.opts.disableDrag
    ) {
      this.dd.draggable(el, "disable");
    }

    if (
      node.noResize ||
      (this._isOneColumnMode() && !self.opts.disableOneColumnMode) ||
      this.opts.disableResize
    ) {
      this.dd.resizable(el, "disable");
    }

    el.attr("data-gs-locked", node.locked ? "yes" : null);
  };

  GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
    triggerAddEvent =
      typeof triggerAddEvent != "undefined" ? triggerAddEvent : false;
    var self = this;
    el = $(el);

    el.addClass(this.opts.itemClass);
    var node = self.grid.addNode(
      {
        x: el.attr("data-gs-x"),
        y: el.attr("data-gs-y"),
        width: el.attr("data-gs-width"),
        height: el.attr("data-gs-height"),
        maxWidth: el.attr("data-gs-max-width"),
        minWidth: el.attr("data-gs-min-width"),
        maxHeight: el.attr("data-gs-max-height"),
        minHeight: el.attr("data-gs-min-height"),
        autoPosition: Utils.toBool(el.attr("data-gs-auto-position")),
        noResize: Utils.toBool(el.attr("data-gs-no-resize")),
        noMove: Utils.toBool(el.attr("data-gs-no-move")),
        locked: Utils.toBool(el.attr("data-gs-locked")),
        el: el,
        id: el.attr("data-gs-id"),
        _grid: self
      },
      triggerAddEvent
    );
    el.data("_gridstack_node", node);

    this._prepareElementsByNode(el, node);
  };

  GridStack.prototype.setAnimation = function(enable) {
    if (enable) {
      this.container.addClass("grid-stack-animate");
    } else {
      this.container.removeClass("grid-stack-animate");
    }
  };

  GridStack.prototype.addWidget = function(
    el,
    x,
    y,
    width,
    height,
    autoPosition,
    minWidth,
    maxWidth,
    minHeight,
    maxHeight,
    id
  ) {
    el = $(el);
    if (typeof x != "undefined") {
      el.attr("data-gs-x", x);
    }
    if (typeof y != "undefined") {
      el.attr("data-gs-y", y);
    }
    if (typeof width != "undefined") {
      el.attr("data-gs-width", width);
    }
    if (typeof height != "undefined") {
      el.attr("data-gs-height", height);
    }
    if (typeof autoPosition != "undefined") {
      el.attr("data-gs-auto-position", autoPosition ? "yes" : null);
    }
    if (typeof minWidth != "undefined") {
      el.attr("data-gs-min-width", minWidth);
    }
    if (typeof maxWidth != "undefined") {
      el.attr("data-gs-max-width", maxWidth);
    }
    if (typeof minHeight != "undefined") {
      el.attr("data-gs-min-height", minHeight);
    }
    if (typeof maxHeight != "undefined") {
      el.attr("data-gs-max-height", maxHeight);
    }
    if (typeof id != "undefined") {
      el.attr("data-gs-id", id);
    }
    this.container.append(el);
    this._prepareElement(el, true);
    this._triggerAddEvent();
    this._updateContainerHeight();
    this._triggerChangeEvent(true);

    return el;
  };

  GridStack.prototype.makeWidget = function(el) {
    el = $(el);
    this._prepareElement(el, true);
    this._triggerAddEvent();
    this._updateContainerHeight();
    this._triggerChangeEvent(true);

    return el;
  };

  GridStack.prototype.willItFit = function(x, y, width, height, autoPosition) {
    var node = {
      x: x,
      y: y,
      width: width,
      height: height,
      autoPosition: autoPosition
    };
    return this.grid.canBePlacedWithRespectToHeight(node);
  };

  GridStack.prototype.removeWidget = function(el, detachNode) {
    detachNode = typeof detachNode === "undefined" ? true : detachNode;
    el = $(el);
    var node = el.data("_gridstack_node");

    // For Meteor support: https://github.com/troolee/gridstack.js/pull/272
    if (!node) {
      node = this.grid.getNodeDataByDOMEl(el);
    }

    this.grid.removeNode(node, detachNode);
    el.removeData("_gridstack_node");
    this._updateContainerHeight();
    if (detachNode) {
      el.remove();
    }
    this._triggerChangeEvent(true);
    this._triggerRemoveEvent();
  };

  GridStack.prototype.removeAll = function(detachNode) {
    _.each(
      this.grid.nodes,
      _.bind(function(node) {
        this.removeWidget(node.el, detachNode);
      }, this)
    );
    this.grid.nodes = [];
    this._updateContainerHeight();
  };

  GridStack.prototype.destroy = function(detachGrid) {
    $(window).off("resize", this.onResizeHandler);
    this.disable();
    if (typeof detachGrid != "undefined" && !detachGrid) {
      this.removeAll(false);
      this.container.removeData("gridstack");
    } else {
      this.container.remove();
    }
    Utils.removeStylesheet(this._stylesId);
    if (this.grid) {
      this.grid = null;
    }
  };

  GridStack.prototype.resizable = function(el, val) {
    var self = this;
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node == "undefined" || node === null) {
        return;
      }

      node.noResize = !(val || false);
      if (
        node.noResize ||
        (self._isOneColumnMode() && !self.opts.disableOneColumnMode)
      ) {
        self.dd.resizable(el, "disable");
      } else {
        self.dd.resizable(el, "enable");
      }
    });
    return this;
  };

  GridStack.prototype.movable = function(el, val) {
    var self = this;
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node == "undefined" || node === null) {
        return;
      }

      node.noMove = !(val || false);
      if (
        node.noMove ||
        (self._isOneColumnMode() && !self.opts.disableOneColumnMode)
      ) {
        self.dd.draggable(el, "disable");
        el.removeClass("ui-draggable-handle");
      } else {
        self.dd.draggable(el, "enable");
        el.addClass("ui-draggable-handle");
      }
    });
    return this;
  };

  GridStack.prototype.enableMove = function(doEnable, includeNewWidgets) {
    this.movable(this.container.children("." + this.opts.itemClass), doEnable);
    if (includeNewWidgets) {
      this.opts.disableDrag = !doEnable;
    }
  };

  GridStack.prototype.enableResize = function(doEnable, includeNewWidgets) {
    this.resizable(
      this.container.children("." + this.opts.itemClass),
      doEnable
    );
    if (includeNewWidgets) {
      this.opts.disableResize = !doEnable;
    }
  };

  GridStack.prototype.disable = function() {
    this.movable(this.container.children("." + this.opts.itemClass), false);
    this.resizable(this.container.children("." + this.opts.itemClass), false);
    this.container.trigger("disable");
  };

  GridStack.prototype.enable = function() {
    this.movable(this.container.children("." + this.opts.itemClass), true);
    this.resizable(this.container.children("." + this.opts.itemClass), true);
    this.container.trigger("enable");
  };

  GridStack.prototype.locked = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node == "undefined" || node === null) {
        return;
      }

      node.locked = val || false;
      el.attr("data-gs-locked", node.locked ? "yes" : null);
    });
    return this;
  };

  GridStack.prototype.maxHeight = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node === "undefined" || node === null) {
        return;
      }

      if (!isNaN(val)) {
        node.maxHeight = val || false;
        el.attr("data-gs-max-height", val);
      }
    });
    return this;
  };

  GridStack.prototype.minHeight = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node === "undefined" || node === null) {
        return;
      }

      if (!isNaN(val)) {
        node.minHeight = val || false;
        el.attr("data-gs-min-height", val);
      }
    });
    return this;
  };

  GridStack.prototype.maxWidth = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node === "undefined" || node === null) {
        return;
      }

      if (!isNaN(val)) {
        node.maxWidth = val || false;
        el.attr("data-gs-max-width", val);
      }
    });
    return this;
  };

  GridStack.prototype.minWidth = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (typeof node === "undefined" || node === null) {
        return;
      }

      if (!isNaN(val)) {
        node.minWidth = val || false;
        el.attr("data-gs-min-width", val);
      }
    });
    return this;
  };

  GridStack.prototype._updateElement = function(el, callback) {
    el = $(el).first();
    var node = el.data("_gridstack_node");
    if (typeof node == "undefined" || node === null) {
      return;
    }

    var self = this;

    self.grid.cleanNodes();
    self.grid.beginUpdate(node);

    callback.call(this, el, node);

    self._updateContainerHeight();
    self._triggerChangeEvent();

    self.grid.endUpdate();
  };

  GridStack.prototype.resize = function(el, width, height) {
    this._updateElement(el, function(el, node) {
      width =
        width !== null && typeof width != "undefined" ? width : node.width;
      height =
        height !== null && typeof height != "undefined" ? height : node.height;

      this.grid.moveNode(node, node.x, node.y, width, height);
    });
  };

  GridStack.prototype.move = function(el, x, y) {
    this._updateElement(el, function(el, node) {
      x = x !== null && typeof x != "undefined" ? x : node.x;
      y = y !== null && typeof y != "undefined" ? y : node.y;

      this.grid.moveNode(node, x, y, node.width, node.height);
    });
  };

  GridStack.prototype.update = function(el, x, y, width, height) {
    this._updateElement(el, function(el, node) {
      x = x !== null && typeof x != "undefined" ? x : node.x;
      y = y !== null && typeof y != "undefined" ? y : node.y;
      width =
        width !== null && typeof width != "undefined" ? width : node.width;
      height =
        height !== null && typeof height != "undefined" ? height : node.height;

      this.grid.moveNode(node, x, y, width, height);
    });
  };

  GridStack.prototype.verticalMargin = function(val, noUpdate) {
    if (typeof val == "undefined") {
      return this.opts.verticalMargin;
    }

    var heightData = Utils.parseHeight(val);

    if (
      this.opts.verticalMarginUnit === heightData.unit &&
      this.opts.height === heightData.height
    ) {
      return;
    }
    this.opts.verticalMarginUnit = heightData.unit;
    this.opts.verticalMargin = heightData.height;

    if (!noUpdate) {
      this._updateStyles();
    }
  };

  GridStack.prototype.cellHeight = function(val, noUpdate) {
    if (typeof val == "undefined") {
      if (this.opts.cellHeight) {
        return this.opts.cellHeight;
      }
      var o = this.container.children("." + this.opts.itemClass).first();
      return Math.ceil(o.outerHeight() / o.attr("data-gs-height"));
    }
    var heightData = Utils.parseHeight(val);

    if (
      this.opts.cellHeightUnit === heightData.heightUnit &&
      this.opts.height === heightData.height
    ) {
      return;
    }
    this.opts.cellHeightUnit = heightData.unit;
    this.opts.cellHeight = heightData.height;

    if (!noUpdate) {
      this._updateStyles();
    }
  };

  GridStack.prototype.cellWidth = function() {
    return Math.round(this.container.outerWidth() / this.opts.width);
  };

  GridStack.prototype.getCellFromPixel = function(position, useOffset) {
    var containerPos =
      typeof useOffset != "undefined" && useOffset
        ? this.container.offset()
        : this.container.position();
    var relativeLeft = position.left - containerPos.left;
    var relativeTop = position.top - containerPos.top;

    var columnWidth = Math.floor(this.container.width() / this.opts.width);
    var rowHeight = Math.floor(
      this.container.height() /
        parseInt(this.container.attr("data-gs-current-height"))
    );

    return {
      x: Math.floor(relativeLeft / columnWidth),
      y: Math.floor(relativeTop / rowHeight)
    };
  };

  GridStack.prototype.batchUpdate = function() {
    this.grid.batchUpdate();
  };

  GridStack.prototype.commit = function() {
    this.grid.commit();
    this._updateContainerHeight();
  };

  GridStack.prototype.isAreaEmpty = function(x, y, width, height) {
    return this.grid.isAreaEmpty(x, y, width, height);
  };

  GridStack.prototype.setStatic = function(staticValue) {
    this.opts.staticGrid = staticValue === true;
    this.enableMove(!staticValue);
    this.enableResize(!staticValue);
    this._setStaticClass();
  };

  GridStack.prototype._setStaticClass = function() {
    var staticClassName = "grid-stack-static";

    if (this.opts.staticGrid === true) {
      this.container.addClass(staticClassName);
    } else {
      this.container.removeClass(staticClassName);
    }
  };

  GridStack.prototype._updateNodeWidths = function(oldWidth, newWidth) {
    this.grid._sortNodes();
    this.grid.batchUpdate();
    var node = {};
    for (var i = 0; i < this.grid.nodes.length; i++) {
      node = this.grid.nodes[i];
      this.update(
        node.el,
        Math.round((node.x * newWidth) / oldWidth),
        undefined,
        Math.round((node.width * newWidth) / oldWidth),
        undefined
      );
    }
    this.grid.commit();
  };

  GridStack.prototype.setGridWidth = function(gridWidth, doNotPropagate) {
    this.container.removeClass("grid-stack-" + this.opts.width);
    if (doNotPropagate !== true) {
      this._updateNodeWidths(this.opts.width, gridWidth);
    }
    this.opts.width = gridWidth;
    this.grid.width = gridWidth;
    this.container.addClass("grid-stack-" + gridWidth);
  };

  // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
  GridStackEngine.prototype.batch_update = obsolete(
    GridStackEngine.prototype.batchUpdate
  );
  GridStackEngine.prototype._fix_collisions = obsolete(
    GridStackEngine.prototype._fixCollisions,
    "_fix_collisions",
    "_fixCollisions"
  );
  GridStackEngine.prototype.is_area_empty = obsolete(
    GridStackEngine.prototype.isAreaEmpty,
    "is_area_empty",
    "isAreaEmpty"
  );
  GridStackEngine.prototype._sort_nodes = obsolete(
    GridStackEngine.prototype._sortNodes,
    "_sort_nodes",
    "_sortNodes"
  );
  GridStackEngine.prototype._pack_nodes = obsolete(
    GridStackEngine.prototype._packNodes,
    "_pack_nodes",
    "_packNodes"
  );
  GridStackEngine.prototype._prepare_node = obsolete(
    GridStackEngine.prototype._prepareNode,
    "_prepare_node",
    "_prepareNode"
  );
  GridStackEngine.prototype.clean_nodes = obsolete(
    GridStackEngine.prototype.cleanNodes,
    "clean_nodes",
    "cleanNodes"
  );
  GridStackEngine.prototype.get_dirty_nodes = obsolete(
    GridStackEngine.prototype.getDirtyNodes,
    "get_dirty_nodes",
    "getDirtyNodes"
  );
  GridStackEngine.prototype.add_node = obsolete(
    GridStackEngine.prototype.addNode,
    "add_node",
    "addNode, "
  );
  GridStackEngine.prototype.remove_node = obsolete(
    GridStackEngine.prototype.removeNode,
    "remove_node",
    "removeNode"
  );
  GridStackEngine.prototype.can_move_node = obsolete(
    GridStackEngine.prototype.canMoveNode,
    "can_move_node",
    "canMoveNode"
  );
  GridStackEngine.prototype.move_node = obsolete(
    GridStackEngine.prototype.moveNode,
    "move_node",
    "moveNode"
  );
  GridStackEngine.prototype.get_grid_height = obsolete(
    GridStackEngine.prototype.getGridHeight,
    "get_grid_height",
    "getGridHeight"
  );
  GridStackEngine.prototype.begin_update = obsolete(
    GridStackEngine.prototype.beginUpdate,
    "begin_update",
    "beginUpdate"
  );
  GridStackEngine.prototype.end_update = obsolete(
    GridStackEngine.prototype.endUpdate,
    "end_update",
    "endUpdate"
  );
  GridStackEngine.prototype.can_be_placed_with_respect_to_height = obsolete(
    GridStackEngine.prototype.canBePlacedWithRespectToHeight,
    "can_be_placed_with_respect_to_height",
    "canBePlacedWithRespectToHeight"
  );
  GridStack.prototype._trigger_change_event = obsolete(
    GridStack.prototype._triggerChangeEvent,
    "_trigger_change_event",
    "_triggerChangeEvent"
  );
  GridStack.prototype._init_styles = obsolete(
    GridStack.prototype._initStyles,
    "_init_styles",
    "_initStyles"
  );
  GridStack.prototype._update_styles = obsolete(
    GridStack.prototype._updateStyles,
    "_update_styles",
    "_updateStyles"
  );
  GridStack.prototype._update_container_height = obsolete(
    GridStack.prototype._updateContainerHeight,
    "_update_container_height",
    "_updateContainerHeight"
  );
  GridStack.prototype._is_one_column_mode = obsolete(
    GridStack.prototype._isOneColumnMode,
    "_is_one_column_mode",
    "_isOneColumnMode"
  );
  GridStack.prototype._prepare_element = obsolete(
    GridStack.prototype._prepareElement,
    "_prepare_element",
    "_prepareElement"
  );
  GridStack.prototype.set_animation = obsolete(
    GridStack.prototype.setAnimation,
    "set_animation",
    "setAnimation"
  );
  GridStack.prototype.add_widget = obsolete(
    GridStack.prototype.addWidget,
    "add_widget",
    "addWidget"
  );
  GridStack.prototype.make_widget = obsolete(
    GridStack.prototype.makeWidget,
    "make_widget",
    "makeWidget"
  );
  GridStack.prototype.will_it_fit = obsolete(
    GridStack.prototype.willItFit,
    "will_it_fit",
    "willItFit"
  );
  GridStack.prototype.remove_widget = obsolete(
    GridStack.prototype.removeWidget,
    "remove_widget",
    "removeWidget"
  );
  GridStack.prototype.remove_all = obsolete(
    GridStack.prototype.removeAll,
    "remove_all",
    "removeAll"
  );
  GridStack.prototype.min_height = obsolete(
    GridStack.prototype.minHeight,
    "min_height",
    "minHeight"
  );
  GridStack.prototype.min_width = obsolete(
    GridStack.prototype.minWidth,
    "min_width",
    "minWidth"
  );
  GridStack.prototype._update_element = obsolete(
    GridStack.prototype._updateElement,
    "_update_element",
    "_updateElement"
  );
  GridStack.prototype.cell_height = obsolete(
    GridStack.prototype.cellHeight,
    "cell_height",
    "cellHeight"
  );
  GridStack.prototype.cell_width = obsolete(
    GridStack.prototype.cellWidth,
    "cell_width",
    "cellWidth"
  );
  GridStack.prototype.get_cell_from_pixel = obsolete(
    GridStack.prototype.getCellFromPixel,
    "get_cell_from_pixel",
    "getCellFromPixel"
  );
  GridStack.prototype.batch_update = obsolete(
    GridStack.prototype.batchUpdate,
    "batch_update",
    "batchUpdate"
  );
  GridStack.prototype.is_area_empty = obsolete(
    GridStack.prototype.isAreaEmpty,
    "is_area_empty",
    "isAreaEmpty"
  );
  GridStack.prototype.set_static = obsolete(
    GridStack.prototype.setStatic,
    "set_static",
    "setStatic"
  );
  GridStack.prototype._set_static_class = obsolete(
    GridStack.prototype._setStaticClass,
    "_set_static_class",
    "_setStaticClass"
  );
  // jscs:enable requireCamelCaseOrUpperCaseIdentifiers

  scope.GridStackUI = GridStack;

  scope.GridStackUI.Utils = Utils;
  scope.GridStackUI.Engine = GridStackEngine;
  scope.GridStackUI.GridStackDragDropPlugin = GridStackDragDropPlugin;

  $.fn.gridstack = function(opts) {
    return this.each(function() {
      var o = $(this);
      if (!o.data("gridstack")) {
        o.data("gridstack", new GridStack(this, opts));
      }
    });
  };

  return scope.GridStackUI;
});