diff --git a/HISTORY.md b/HISTORY.md
index 2bee89bc..c768e390 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -8,6 +8,14 @@ http://visjs.org
 
 - Added option bindToWindow (default true) to choose whether the keyboard binds are global or to the network div.
 - Improved images handling so broken images are shown on all references of images that are broken.
+- Added getConnectedNodes method.
+- Added fontSizeMin, fontSizeMax, fontSizeMaxVisible, scaleFontWithValue, fontDrawThreshold to Nodes.
+- Added fade in of labels (on nodes) near the fontDrawThreshold.
+- Added nodes option to zoomExtent to zoom in on specific set of nodes.
+- Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized.
+- Added setFreezeSimulation method.
+- Added clusterByZoom option and increaseClusterLevel and decreaseClusterLevel methods.
+
 
 ### DataSet/DataView
 
diff --git a/dist/vis.js b/dist/vis.js
index 59f20156..b06498e8 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 3.9.2-SNAPSHOT
- * @date    2015-02-05
+ * @date    2015-02-06
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -113,24 +113,24 @@ return /******/ (function(modules) { // webpackBootstrap
 
     components: {
       items: {
-        Item: __webpack_require__(20),
-        BackgroundItem: __webpack_require__(21),
-        BoxItem: __webpack_require__(22),
-        PointItem: __webpack_require__(23),
-        RangeItem: __webpack_require__(24)
+        Item: __webpack_require__(31),
+        BackgroundItem: __webpack_require__(32),
+        BoxItem: __webpack_require__(33),
+        PointItem: __webpack_require__(34),
+        RangeItem: __webpack_require__(35)
       },
 
-      Component: __webpack_require__(25),
-      CurrentTime: __webpack_require__(26),
-      CustomTime: __webpack_require__(27),
-      DataAxis: __webpack_require__(28),
-      GraphGroup: __webpack_require__(29),
-      Group: __webpack_require__(30),
-      BackgroundGroup: __webpack_require__(31),
-      ItemSet: __webpack_require__(32),
-      Legend: __webpack_require__(33),
-      LineGraph: __webpack_require__(34),
-      TimeAxis: __webpack_require__(35)
+      Component: __webpack_require__(20),
+      CurrentTime: __webpack_require__(21),
+      CustomTime: __webpack_require__(22),
+      DataAxis: __webpack_require__(23),
+      GraphGroup: __webpack_require__(24),
+      Group: __webpack_require__(25),
+      BackgroundGroup: __webpack_require__(26),
+      ItemSet: __webpack_require__(27),
+      Legend: __webpack_require__(28),
+      LineGraph: __webpack_require__(29),
+      TimeAxis: __webpack_require__(30)
     }
   };
 
@@ -919,6 +919,28 @@ return /******/ (function(modules) { // webpackBootstrap
     } : null;
   };
 
+  /**
+   * This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
+   * @param color
+   * @param opacity
+   * @returns {*}
+   */
+  exports.overrideOpacity = function(color,opacity) {
+    if (color.indexOf("rgb") != -1) {
+      var rgb = color.substr(color.indexOf("(")+1).replace(")","").split(",");
+      return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + opacity + ")"
+    }
+    else {
+      var rgb = exports.hexToRGB(color);
+      if (rgb == null) {
+        return color;
+      }
+      else {
+        return "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ")"
+      }
+    }
+  }
+
   /**
    *
    * @param red     0 -- 255
@@ -6403,11 +6425,11 @@ return /******/ (function(modules) { // webpackBootstrap
   var DataSet = __webpack_require__(3);
   var DataView = __webpack_require__(4);
   var Range = __webpack_require__(17);
-  var Core = __webpack_require__(46);
-  var TimeAxis = __webpack_require__(35);
-  var CurrentTime = __webpack_require__(26);
-  var CustomTime = __webpack_require__(27);
-  var ItemSet = __webpack_require__(32);
+  var Core = __webpack_require__(48);
+  var TimeAxis = __webpack_require__(30);
+  var CurrentTime = __webpack_require__(21);
+  var CustomTime = __webpack_require__(22);
+  var ItemSet = __webpack_require__(27);
 
   /**
    * Create a timeline visualization
@@ -6723,11 +6745,11 @@ return /******/ (function(modules) { // webpackBootstrap
   var DataSet = __webpack_require__(3);
   var DataView = __webpack_require__(4);
   var Range = __webpack_require__(17);
-  var Core = __webpack_require__(46);
-  var TimeAxis = __webpack_require__(35);
-  var CurrentTime = __webpack_require__(26);
-  var CustomTime = __webpack_require__(27);
-  var LineGraph = __webpack_require__(34);
+  var Core = __webpack_require__(48);
+  var TimeAxis = __webpack_require__(30);
+  var CurrentTime = __webpack_require__(21);
+  var CustomTime = __webpack_require__(22);
+  var LineGraph = __webpack_require__(29);
 
   /**
    * Create a timeline visualization
@@ -7719,9 +7741,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ function(module, exports, __webpack_require__) {
 
   var util = __webpack_require__(1);
-  var hammerUtil = __webpack_require__(47);
+  var hammerUtil = __webpack_require__(46);
   var moment = __webpack_require__(44);
-  var Component = __webpack_require__(25);
+  var Component = __webpack_require__(20);
   var DateUtil = __webpack_require__(15);
 
   /**
@@ -9141,3756 +9163,3955 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 20 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Hammer = __webpack_require__(45);
-  var util = __webpack_require__(1);
-
   /**
-   * @constructor Item
-   * @param {Object} data             Object containing (optional) parameters type,
-   *                                  start, end, content, group, className.
-   * @param {{toScreen: function, toTime: function}} conversion
-   *                                  Conversion functions from time to screen and vice versa
-   * @param {Object} options          Configuration options
-   *                                  // TODO: describe available options
+   * Prototype for visual components
+   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
+   * @param {Object} [options]
    */
-  function Item (data, conversion, options) {
-    this.id = null;
-    this.parent = null;
-    this.data = data;
-    this.dom = null;
-    this.conversion = conversion || {};
-    this.options = options || {};
-
-    this.selected = false;
-    this.displayed = false;
-    this.dirty = true;
-
-    this.top = null;
-    this.left = null;
-    this.width = null;
-    this.height = null;
+  function Component (body, options) {
+    this.options = null;
+    this.props = null;
   }
 
-  Item.prototype.stack = true;
-
   /**
-   * Select current item
+   * Set options for the component. The new options will be merged into the
+   * current options.
+   * @param {Object} options
    */
-  Item.prototype.select = function() {
-    this.selected = true;
-    this.dirty = true;
-    if (this.displayed) this.redraw();
+  Component.prototype.setOptions = function(options) {
+    if (options) {
+      util.extend(this.options, options);
+    }
   };
 
   /**
-   * Unselect current item
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  Item.prototype.unselect = function() {
-    this.selected = false;
-    this.dirty = true;
-    if (this.displayed) this.redraw();
+  Component.prototype.redraw = function() {
+    // should be implemented by the component
+    return false;
   };
 
   /**
-   * Set data for the item. Existing data will be updated. The id should not
-   * be changed. When the item is displayed, it will be redrawn immediately.
-   * @param {Object} data
+   * Destroy the component. Cleanup DOM and event listeners
    */
-  Item.prototype.setData = function(data) {
-    this.data = data;
-    this.dirty = true;
-    if (this.displayed) this.redraw();
+  Component.prototype.destroy = function() {
+    // should be implemented by the component
   };
 
   /**
-   * Set a parent for the item
-   * @param {ItemSet | Group} parent
+   * Test whether the component is resized since the last time _isResized() was
+   * called.
+   * @return {Boolean} Returns true if the component is resized
+   * @protected
    */
-  Item.prototype.setParent = function(parent) {
-    if (this.displayed) {
-      this.hide();
-      this.parent = parent;
-      if (this.parent) {
-        this.show();
-      }
-    }
-    else {
-      this.parent = parent;
-    }
-  };
+  Component.prototype._isResized = function() {
+    var resized = (this.props._previousWidth !== this.props.width ||
+        this.props._previousHeight !== this.props.height);
 
-  /**
-   * Check whether this item is visible inside given range
-   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
-   * @returns {boolean} True if visible
-   */
-  Item.prototype.isVisible = function(range) {
-    // Should be implemented by Item implementations
-    return false;
-  };
+    this.props._previousWidth = this.props.width;
+    this.props._previousHeight = this.props.height;
 
-  /**
-   * Show the Item in the DOM (when not already visible)
-   * @return {Boolean} changed
-   */
-  Item.prototype.show = function() {
-    return false;
+    return resized;
   };
 
+  module.exports = Component;
+
+
+/***/ },
+/* 21 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(20);
+  var moment = __webpack_require__(44);
+  var locales = __webpack_require__(47);
+
   /**
-   * Hide the Item from the DOM (when visible)
-   * @return {Boolean} changed
+   * A current time bar
+   * @param {{range: Range, dom: Object, domProps: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCurrentTime]
+   * @constructor CurrentTime
+   * @extends Component
    */
-  Item.prototype.hide = function() {
-    return false;
-  };
+  function CurrentTime (body, options) {
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      showCurrentTime: true,
+
+      locales: locales,
+      locale: 'en'
+    };
+    this.options = util.extend({}, this.defaultOptions);
+    this.offset = 0;
+
+    this._create();
+
+    this.setOptions(options);
+  }
+
+  CurrentTime.prototype = new Component();
 
   /**
-   * Repaint the item
+   * Create the HTML DOM for the current time bar
+   * @private
    */
-  Item.prototype.redraw = function() {
-    // should be implemented by the item
+  CurrentTime.prototype._create = function() {
+    var bar = document.createElement('div');
+    bar.className = 'currenttime';
+    bar.style.position = 'absolute';
+    bar.style.top = '0px';
+    bar.style.height = '100%';
+
+    this.bar = bar;
   };
 
   /**
-   * Reposition the Item horizontally
+   * Destroy the CurrentTime bar
    */
-  Item.prototype.repositionX = function() {
-    // should be implemented by the item
+  CurrentTime.prototype.destroy = function () {
+    this.options.showCurrentTime = false;
+    this.redraw(); // will remove the bar from the DOM and stop refreshing
+
+    this.body = null;
   };
 
   /**
-   * Reposition the Item vertically
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCurrentTime]
    */
-  Item.prototype.repositionY = function() {
-    // should be implemented by the item
+  CurrentTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCurrentTime', 'locale', 'locales'], this.options, options);
+    }
   };
 
   /**
-   * Repaint a delete button on the top right of the item when the item is selected
-   * @param {HTMLElement} anchor
-   * @protected
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  Item.prototype._repaintDeleteButton = function (anchor) {
-    if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
-      // create and show button
-      var me = this;
+  CurrentTime.prototype.redraw = function() {
+    if (this.options.showCurrentTime) {
+      var parent = this.body.dom.backgroundVertical;
+      if (this.bar.parentNode != parent) {
+        // attach to the dom
+        if (this.bar.parentNode) {
+          this.bar.parentNode.removeChild(this.bar);
+        }
+        parent.appendChild(this.bar);
 
-      var deleteButton = document.createElement('div');
-      deleteButton.className = 'delete';
-      deleteButton.title = 'Delete this item';
+        this.start();
+      }
 
-      Hammer(deleteButton, {
-        preventDefault: true
-      }).on('tap', function (event) {
-        me.parent.removeFromDataSet(me);
-        event.stopPropagation();
-      });
+      var now = new Date(new Date().valueOf() + this.offset);
+      var x = this.body.util.toScreen(now);
 
-      anchor.appendChild(deleteButton);
-      this.dom.deleteButton = deleteButton;
+      var locale = this.options.locales[this.options.locale];
+      var title = locale.current + ' ' + locale.time + ': ' + moment(now).format('dddd, MMMM Do YYYY, H:mm:ss');
+      title = title.charAt(0).toUpperCase() + title.substring(1);
+
+      this.bar.style.left = x + 'px';
+      this.bar.title = title;
     }
-    else if (!this.selected && this.dom.deleteButton) {
-      // remove button
-      if (this.dom.deleteButton.parentNode) {
-        this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
       }
-      this.dom.deleteButton = null;
+      this.stop();
     }
+
+    return false;
   };
 
   /**
-   * Set HTML contents for the item
-   * @param {Element} element   HTML element to fill with the contents
-   * @private
+   * Start auto refreshing the current time bar
    */
-  Item.prototype._updateContents = function (element) {
-    var content;
-    if (this.options.template) {
-      var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
-      content = this.options.template(itemData);
-    }
-    else {
-      content = this.data.content;
-    }
+  CurrentTime.prototype.start = function() {
+    var me = this;
 
-    if(content !== this.content) {
-      // only replace the content when changed
-      if (content instanceof Element) {
-        element.innerHTML = '';
-        element.appendChild(content);
-      }
-      else if (content != undefined) {
-        element.innerHTML = content;
-      }
-      else {
-        if (!(this.data.type == 'background' && this.data.content === undefined)) {
-          throw new Error('Property "content" missing in item ' + this.id);
-        }
-      }
+    function update () {
+      me.stop();
 
-      this.content = content;
+      // determine interval to refresh
+      var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
+      var interval = 1 / scale / 10;
+      if (interval < 30)   interval = 30;
+      if (interval > 1000) interval = 1000;
+
+      me.redraw();
+
+      // start a timer to adjust for the new time
+      me.currentTimeTimer = setTimeout(update, interval);
     }
+
+    update();
   };
 
   /**
-   * Set HTML contents for the item
-   * @param {Element} element   HTML element to fill with the contents
-   * @private
+   * Stop auto refreshing the current time bar
    */
-  Item.prototype._updateTitle = function (element) {
-    if (this.data.title != null) {
-      element.title = this.data.title || '';
-    }
-    else {
-      element.removeAttribute('title');
+  CurrentTime.prototype.stop = function() {
+    if (this.currentTimeTimer !== undefined) {
+      clearTimeout(this.currentTimeTimer);
+      delete this.currentTimeTimer;
     }
   };
 
   /**
-   * Process dataAttributes timeline option and set as data- attributes on dom.content
-   * @param {Element} element   HTML element to which the attributes will be attached
-   * @private
+   * Set a current time. This can be used for example to ensure that a client's
+   * time is synchronized with a shared server time.
+   * @param {Date | String | Number} time     A Date, unix timestamp, or
+   *                                          ISO date string.
    */
-   Item.prototype._updateDataAttributes = function(element) {
-    if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
-      var attributes = [];
-
-      if (Array.isArray(this.options.dataAttributes)) {
-        attributes = this.options.dataAttributes;
-      }
-      else if (this.options.dataAttributes == 'all') {
-        attributes = Object.keys(this.data);
-      }
-      else {
-        return;
-      }
-
-      for (var i = 0; i < attributes.length; i++) {
-        var name = attributes[i];
-        var value = this.data[name];
-
-        if (value != null) {
-          element.setAttribute('data-' + name, value);
-        }
-        else {
-          element.removeAttribute('data-' + name);
-        }
-      }
-    }
+  CurrentTime.prototype.setCurrentTime = function(time) {
+    var t = util.convert(time, 'Date').valueOf();
+    var now = new Date().valueOf();
+    this.offset = t - now;
+    this.redraw();
   };
 
   /**
-   * Update custom styles of the element
-   * @param element
-   * @private
+   * Get the current time.
+   * @return {Date} Returns the current time.
    */
-  Item.prototype._updateStyle = function(element) {
-    // remove old styles
-    if (this.style) {
-      util.removeCssText(element, this.style);
-      this.style = null;
-    }
-
-    // append new styles
-    if (this.data.style) {
-      util.addCssText(element, this.data.style);
-      this.style = this.data.style;
-    }
+  CurrentTime.prototype.getCurrentTime = function() {
+    return new Date(new Date().valueOf() + this.offset);
   };
 
-  module.exports = Item;
+  module.exports = CurrentTime;
 
 
 /***/ },
-/* 21 */
+/* 22 */
 /***/ function(module, exports, __webpack_require__) {
 
   var Hammer = __webpack_require__(45);
-  var Item = __webpack_require__(20);
-  var BackgroundGroup = __webpack_require__(31);
-  var RangeItem = __webpack_require__(24);
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(20);
+  var moment = __webpack_require__(44);
+  var locales = __webpack_require__(47);
 
   /**
-   * @constructor BackgroundItem
-   * @extends Item
-   * @param {Object} data             Object containing parameters start, end
-   *                                  content, className.
-   * @param {{toScreen: function, toTime: function}} conversion
-   *                                  Conversion functions from time to screen and vice versa
-   * @param {Object} [options]        Configuration options
-   *                                  // TODO: describe options
+   * A custom time bar
+   * @param {{range: Range, dom: Object}} body
+   * @param {Object} [options]        Available parameters:
+   *                                  {Boolean} [showCustomTime]
+   * @constructor CustomTime
+   * @extends Component
    */
-  // TODO: implement support for the BackgroundItem just having a start, then being displayed as a sort of an annotation
-  function BackgroundItem (data, conversion, options) {
-    this.props = {
-      content: {
-        width: 0
-      }
+
+  function CustomTime (body, options) {
+    this.body = body;
+
+    // default options
+    this.defaultOptions = {
+      showCustomTime: false,
+      locales: locales,
+      locale: 'en'
     };
-    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
+    this.options = util.extend({}, this.defaultOptions);
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data.id);
-      }
-      if (data.end == undefined) {
-        throw new Error('Property "end" missing in item ' + data.id);
-      }
-    }
+    this.customTime = new Date();
+    this.eventParams = {}; // stores state parameters while dragging the bar
 
-    Item.call(this, data, conversion, options);
+    // create the DOM
+    this._create();
 
-    this.emptyContent = false;
+    this.setOptions(options);
   }
 
-  BackgroundItem.prototype = new Item (null, null, null);
-
-  BackgroundItem.prototype.baseClassName = 'item background';
-  BackgroundItem.prototype.stack = false;
+  CustomTime.prototype = new Component();
 
   /**
-   * Check whether this item is visible inside given range
-   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
-   * @returns {boolean} True if visible
+   * Set options for the component. Options will be merged in current options.
+   * @param {Object} options  Available parameters:
+   *                          {boolean} [showCustomTime]
    */
-  BackgroundItem.prototype.isVisible = function(range) {
-    // determine visibility
-    return (this.data.start < range.end) && (this.data.end > range.start);
+  CustomTime.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
+    }
   };
 
   /**
-   * Repaint the item
+   * Create the DOM for the custom time
+   * @private
    */
-  BackgroundItem.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
+  CustomTime.prototype._create = function() {
+    var bar = document.createElement('div');
+    bar.className = 'customtime';
+    bar.style.position = 'absolute';
+    bar.style.top = '0px';
+    bar.style.height = '100%';
+    this.bar = bar;
 
-      // background box
-      dom.box = document.createElement('div');
-      // className is updated in redraw()
+    var drag = document.createElement('div');
+    drag.style.position = 'relative';
+    drag.style.top = '0px';
+    drag.style.left = '-10px';
+    drag.style.height = '100%';
+    drag.style.width = '20px';
+    bar.appendChild(drag);
 
-      // contents box
-      dom.content = document.createElement('div');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+    // attach event listeners
+    this.hammer = Hammer(bar, {
+      prevent_default: true
+    });
+    this.hammer.on('dragstart', this._onDragStart.bind(this));
+    this.hammer.on('drag',      this._onDrag.bind(this));
+    this.hammer.on('dragend',   this._onDragEnd.bind(this));
+  };
 
-      // Note: we do NOT attach this item as attribute to the DOM,
-      //       such that background items cannot be selected
-      //dom.box['timeline-item'] = this;
+  /**
+   * Destroy the CustomTime bar
+   */
+  CustomTime.prototype.destroy = function () {
+    this.options.showCustomTime = false;
+    this.redraw(); // will remove the bar from the DOM
 
-      this.dirty = true;
-    }
+    this.hammer.enable(false);
+    this.hammer = null;
 
-    // append DOM to parent DOM
-    if (!this.parent) {
-      throw new Error('Cannot redraw item: no parent attached');
-    }
-    if (!dom.box.parentNode) {
-      var background = this.parent.dom.background;
-      if (!background) {
-        throw new Error('Cannot redraw item: parent has no background container element');
+    this.body = null;
+  };
+
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  CustomTime.prototype.redraw = function () {
+    if (this.options.showCustomTime) {
+      var parent = this.body.dom.backgroundVertical;
+      if (this.bar.parentNode != parent) {
+        // attach to the dom
+        if (this.bar.parentNode) {
+          this.bar.parentNode.removeChild(this.bar);
+        }
+        parent.appendChild(this.bar);
       }
-      background.appendChild(dom.box);
-    }
-    this.displayed = true;
 
-    // Update DOM when item is marked dirty. An item is marked dirty when:
-    // - the item is not yet rendered
-    // - the item's data is changed
-    // - the item is selected/deselected
-    if (this.dirty) {
-      this._updateContents(this.dom.content);
-      this._updateTitle(this.dom.content);
-      this._updateDataAttributes(this.dom.content);
-      this._updateStyle(this.dom.box);
+      var x = this.body.util.toScreen(this.customTime);
 
-      // update class
-      var className = (this.data.className ? (' ' + this.data.className) : '') +
-          (this.selected ? ' selected' : '');
-      dom.box.className = this.baseClassName + className;
+      var locale = this.options.locales[this.options.locale];
+      var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
+      title = title.charAt(0).toUpperCase() + title.substring(1);
 
-      // determine from css whether this box has overflow
-      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
+      this.bar.style.left = x + 'px';
+      this.bar.title = title;
+    }
+    else {
+      // remove the line from the DOM
+      if (this.bar.parentNode) {
+        this.bar.parentNode.removeChild(this.bar);
+      }
+    }
 
-      // recalculate size
-      this.props.content.width = this.dom.content.offsetWidth;
-      this.height = 0; // set height zero, so this item will be ignored when stacking items
+    return false;
+  };
 
-      this.dirty = false;
-    }
+  /**
+   * Set custom time.
+   * @param {Date | number | string} time
+   */
+  CustomTime.prototype.setCustomTime = function(time) {
+    this.customTime = util.convert(time, 'Date');
+    this.redraw();
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Retrieve the current custom time.
+   * @return {Date} customTime
    */
-  BackgroundItem.prototype.show = RangeItem.prototype.show;
+  CustomTime.prototype.getCustomTime = function() {
+    return new Date(this.customTime.valueOf());
+  };
 
   /**
-   * Hide the item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Start moving horizontally
+   * @param {Event} event
+   * @private
    */
-  BackgroundItem.prototype.hide = RangeItem.prototype.hide;
+  CustomTime.prototype._onDragStart = function(event) {
+    this.eventParams.dragging = true;
+    this.eventParams.customTime = this.customTime;
+
+    event.stopPropagation();
+    event.preventDefault();
+  };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Perform moving operating.
+   * @param {Event} event
+   * @private
    */
-  BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
+  CustomTime.prototype._onDrag = function (event) {
+    if (!this.eventParams.dragging) return;
+
+    var deltaX = event.gesture.deltaX,
+        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
+        time = this.body.util.toTime(x);
+
+    this.setCustomTime(time);
+
+    // fire a timechange event
+    this.body.emitter.emit('timechange', {
+      time: new Date(this.customTime.valueOf())
+    });
+
+    event.stopPropagation();
+    event.preventDefault();
+  };
 
   /**
-   * Reposition the item vertically
-   * @Override
+   * Stop moving operating.
+   * @param {event} event
+   * @private
    */
-  BackgroundItem.prototype.repositionY = function(margin) {
-    var onTop = this.options.orientation === 'top';
-    this.dom.content.style.top = onTop ? '' : '0';
-    this.dom.content.style.bottom = onTop ? '0' : '';
-    var height;
+  CustomTime.prototype._onDragEnd = function (event) {
+    if (!this.eventParams.dragging) return;
 
-    // special positioning for subgroups
-    if (this.data.subgroup !== undefined) {
-      var itemSubgroup = this.data.subgroup;
-      var subgroups = this.parent.subgroups;
-      var subgroupIndex = subgroups[itemSubgroup].index;
-      // if the orientation is top, we need to take the difference in height into account.
-      if (onTop == true) {
-        // the first subgroup will have to account for the distance from the top to the first item.
-        height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
-        height += subgroupIndex == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
-        var newTop = this.parent.top;
-        for (var subgroup in subgroups) {
-          if (subgroups.hasOwnProperty(subgroup)) {
-            if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroupIndex) {
-              newTop += subgroups[subgroup].height + margin.item.vertical;
-            }
-          }
-        }
+    // fire a timechanged event
+    this.body.emitter.emit('timechanged', {
+      time: new Date(this.customTime.valueOf())
+    });
 
-        // the others will have to be offset downwards with this same distance.
-        newTop += subgroupIndex != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
-        this.dom.box.style.top = newTop + 'px';
-        this.dom.box.style.bottom = '';
-      }
-      // and when the orientation is bottom:
-      else {
-        var newTop = this.parent.top;
-        for (var subgroup in subgroups) {
-          if (subgroups.hasOwnProperty(subgroup)) {
-            if (subgroups[subgroup].visible == true && subgroups[subgroup].index > subgroupIndex) {
-              newTop += subgroups[subgroup].height + margin.item.vertical;
-            }
-          }
-        }
-        height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
-        this.dom.box.style.top = newTop + 'px';
-        this.dom.box.style.bottom = '';
-      }
-    }
-    // and in the case of no subgroups:
-    else {
-      // we want backgrounds with groups to only show in groups.
-      if (this.parent instanceof BackgroundGroup) {
-        // if the item is not in a group:
-        height = Math.max(this.parent.height,
-            this.parent.itemSet.body.domProps.center.height,
-            this.parent.itemSet.body.domProps.centerContainer.height);
-        this.dom.box.style.top = onTop ? '0' : '';
-        this.dom.box.style.bottom = onTop ? '' : '0';
-      }
-      else {
-        height = this.parent.height;
-        // same alignment for items when orientation is top or bottom
-        this.dom.box.style.top = this.parent.top + 'px';
-        this.dom.box.style.bottom = '';
-      }
-    }
-    this.dom.box.style.height = height + 'px';
+    event.stopPropagation();
+    event.preventDefault();
   };
 
-  module.exports = BackgroundItem;
+  module.exports = CustomTime;
 
 
 /***/ },
-/* 22 */
+/* 23 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var Item = __webpack_require__(20);
   var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(2);
+  var Component = __webpack_require__(20);
+  var DataStep = __webpack_require__(16);
 
   /**
-   * @constructor BoxItem
-   * @extends Item
-   * @param {Object} data             Object containing parameters start
-   *                                  content, className.
-   * @param {{toScreen: function, toTime: function}} conversion
-   *                                  Conversion functions from time to screen and vice versa
-   * @param {Object} [options]        Configuration options
-   *                                  // TODO: describe available options
+   * A horizontal time axis
+   * @param {Object} [options]        See DataAxis.setOptions for the available
+   *                                  options.
+   * @constructor DataAxis
+   * @extends Component
+   * @param body
    */
-  function BoxItem (data, conversion, options) {
-    this.props = {
-      dot: {
-        width: 0,
-        height: 0
+  function DataAxis (body, options, svg, linegraphOptions) {
+    this.id = util.randomUUID();
+    this.body = body;
+
+    this.defaultOptions = {
+      orientation: 'left',  // supported: 'left', 'right'
+      showMinorLabels: true,
+      showMajorLabels: true,
+      icons: true,
+      majorLinesOffset: 7,
+      minorLinesOffset: 4,
+      labelOffsetX: 10,
+      labelOffsetY: 2,
+      iconWidth: 20,
+      width: '40px',
+      visible: true,
+      alignZeros: true,
+      customRange: {
+        left: {min:undefined, max:undefined},
+        right: {min:undefined, max:undefined}
       },
-      line: {
-        width: 0,
-        height: 0
+      title: {
+        left: {text:undefined},
+        right: {text:undefined}
+      },
+      format: {
+        left: {decimals: undefined},
+        right: {decimals: undefined}
       }
     };
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
-      }
-    }
-
-    Item.call(this, data, conversion, options);
-  }
-
-  BoxItem.prototype = new Item (null, null, null);
+    this.linegraphOptions = linegraphOptions;
+    this.linegraphSVG = svg;
+    this.props = {};
+    this.DOMelements = { // dynamic elements
+      lines: {},
+      labels: {},
+      title: {}
+    };
 
-  /**
-   * Check whether this item is visible inside given range
-   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
-   * @returns {boolean} True if visible
-   */
-  BoxItem.prototype.isVisible = function(range) {
-    // determine visibility
-    // TODO: account for the real width of the item. Right now we just add 1/4 to the window
-    var interval = (range.end - range.start) / 4;
-    return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
-  };
+    this.dom = {};
 
-  /**
-   * Repaint the item
-   */
-  BoxItem.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
+    this.range = {start:0, end:0};
 
-      // create main box
-      dom.box = document.createElement('DIV');
+    this.options = util.extend({}, this.defaultOptions);
+    this.conversionFactor = 1;
 
-      // contents box (inside the background box). used for making margins
-      dom.content = document.createElement('DIV');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+    this.setOptions(options);
+    this.width = Number(('' + this.options.width).replace("px",""));
+    this.minWidth = this.width;
+    this.height = this.linegraphSVG.offsetHeight;
+    this.hidden = false;
 
-      // line to axis
-      dom.line = document.createElement('DIV');
-      dom.line.className = 'line';
+    this.stepPixels = 25;
+    this.stepPixelsForced = 25;
+    this.zeroCrossing = -1;
 
-      // dot on axis
-      dom.dot = document.createElement('DIV');
-      dom.dot.className = 'dot';
+    this.lineOffset = 0;
+    this.master = true;
+    this.svgElements = {};
+    this.iconsRemoved = false;
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
 
-      this.dirty = true;
-    }
+    this.groups = {};
+    this.amountOfGroups = 0;
 
-    // append DOM to parent DOM
-    if (!this.parent) {
-      throw new Error('Cannot redraw item: no parent attached');
-    }
-    if (!dom.box.parentNode) {
-      var foreground = this.parent.dom.foreground;
-      if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
-      foreground.appendChild(dom.box);
-    }
-    if (!dom.line.parentNode) {
-      var background = this.parent.dom.background;
-      if (!background) throw new Error('Cannot redraw item: parent has no background container element');
-      background.appendChild(dom.line);
-    }
-    if (!dom.dot.parentNode) {
-      var axis = this.parent.dom.axis;
-      if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
-      axis.appendChild(dom.dot);
-    }
-    this.displayed = true;
+    // create the HTML DOM
+    this._create();
 
-    // Update DOM when item is marked dirty. An item is marked dirty when:
-    // - the item is not yet rendered
-    // - the item's data is changed
-    // - the item is selected/deselected
-    if (this.dirty) {
-      this._updateContents(this.dom.content);
-      this._updateTitle(this.dom.box);
-      this._updateDataAttributes(this.dom.box);
-      this._updateStyle(this.dom.box);
+    var me = this;
+    this.body.emitter.on("verticalDrag", function() {
+      me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px';
+    });
+  }
 
-      // update class
-      var className = (this.data.className? ' ' + this.data.className : '') +
-          (this.selected ? ' selected' : '');
-      dom.box.className = 'item box' + className;
-      dom.line.className = 'item line' + className;
-      dom.dot.className  = 'item dot' + className;
+  DataAxis.prototype = new Component();
 
-      // recalculate size
-      this.props.dot.height = dom.dot.offsetHeight;
-      this.props.dot.width = dom.dot.offsetWidth;
-      this.props.line.width = dom.line.offsetWidth;
-      this.width = dom.box.offsetWidth;
-      this.height = dom.box.offsetHeight;
 
-      this.dirty = false;
+  DataAxis.prototype.addGroup = function(label, graphOptions) {
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
     }
+    this.amountOfGroups += 1;
+  };
 
-    this._repaintDeleteButton(dom.box);
+  DataAxis.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
   };
 
-  /**
-   * Show the item in the DOM (when not already displayed). The items DOM will
-   * be created when needed.
-   */
-  BoxItem.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  DataAxis.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
     }
   };
 
-  /**
-   * Hide the item from the DOM (when visible)
-   */
-  BoxItem.prototype.hide = function() {
-    if (this.displayed) {
-      var dom = this.dom;
 
-      if (dom.box.parentNode)   dom.box.parentNode.removeChild(dom.box);
-      if (dom.line.parentNode)  dom.line.parentNode.removeChild(dom.line);
-      if (dom.dot.parentNode)   dom.dot.parentNode.removeChild(dom.dot);
+  DataAxis.prototype.setOptions = function (options) {
+    if (options) {
+      var redraw = false;
+      if (this.options.orientation != options.orientation && options.orientation !== undefined) {
+        redraw = true;
+      }
+      var fields = [
+        'orientation',
+        'showMinorLabels',
+        'showMajorLabels',
+        'icons',
+        'majorLinesOffset',
+        'minorLinesOffset',
+        'labelOffsetX',
+        'labelOffsetY',
+        'iconWidth',
+        'width',
+        'visible',
+        'customRange',
+        'title',
+        'format',
+        'alignZeros'
+      ];
+      util.selectiveExtend(fields, this.options, options);
 
-      this.top = null;
-      this.left = null;
+      this.minWidth = Number(('' + this.options.width).replace("px",""));
 
-      this.displayed = false;
+      if (redraw == true && this.dom.frame) {
+        this.hide();
+        this.show();
+      }
     }
   };
 
+
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Create the HTML DOM for the DataAxis
    */
-  BoxItem.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start);
-    var align = this.options.align;
-    var left;
-    var box = this.dom.box;
-    var line = this.dom.line;
-    var dot = this.dom.dot;
+  DataAxis.prototype._create = function() {
+    this.dom.frame = document.createElement('div');
+    this.dom.frame.style.width = this.options.width;
+    this.dom.frame.style.height = this.height;
 
-    // calculate left position of the box
-    if (align == 'right') {
-      this.left = start - this.width;
-    }
-    else if (align == 'left') {
-      this.left = start;
+    this.dom.lineContainer = document.createElement('div');
+    this.dom.lineContainer.style.width = '100%';
+    this.dom.lineContainer.style.height = this.height;
+    this.dom.lineContainer.style.position = 'relative';
+
+    // create svg element for graph drawing.
+    this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+    this.svg.style.position = "absolute";
+    this.svg.style.top = '0px';
+    this.svg.style.height = '100%';
+    this.svg.style.width = '100%';
+    this.svg.style.display = "block";
+    this.dom.frame.appendChild(this.svg);
+  };
+
+  DataAxis.prototype._redrawGroupIcons = function () {
+    DOMutil.prepareElements(this.svgElements);
+
+    var x;
+    var iconWidth = this.options.iconWidth;
+    var iconHeight = 15;
+    var iconOffset = 4;
+    var y = iconOffset + 0.5 * iconHeight;
+
+    if (this.options.orientation == 'left') {
+      x = iconOffset;
     }
     else {
-      // default or 'center'
-      this.left = start - this.width / 2;
+      x = this.width - iconWidth - iconOffset;
     }
 
-    // reposition box
-    box.style.left = this.left + 'px';
-
-    // reposition line
-    line.style.left = (start - this.props.line.width / 2) + 'px';
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+          y += iconHeight + iconOffset;
+        }
+      }
+    }
 
-    // reposition dot
-    dot.style.left = (start - this.props.dot.width / 2) + 'px';
+    DOMutil.cleanupElements(this.svgElements);
+    this.iconsRemoved = false;
   };
 
+  DataAxis.prototype._cleanupIcons = function() {
+    if (this.iconsRemoved == false) {
+      DOMutil.prepareElements(this.svgElements);
+      DOMutil.cleanupElements(this.svgElements);
+      this.iconsRemoved = true;
+    }
+  }
+
   /**
-   * Reposition the item vertically
-   * @Override
+   * Create the HTML DOM for the DataAxis
    */
-  BoxItem.prototype.repositionY = function() {
-    var orientation = this.options.orientation;
-    var box = this.dom.box;
-    var line = this.dom.line;
-    var dot = this.dom.dot;
-
-    if (orientation == 'top') {
-      box.style.top     = (this.top || 0) + 'px';
+  DataAxis.prototype.show = function() {
+    this.hidden = false;
+    if (!this.dom.frame.parentNode) {
+      if (this.options.orientation == 'left') {
+        this.body.dom.left.appendChild(this.dom.frame);
+      }
+      else {
+        this.body.dom.right.appendChild(this.dom.frame);
+      }
+    }
 
-      line.style.top    = '0';
-      line.style.height = (this.parent.top + this.top + 1) + 'px';
-      line.style.bottom = '';
+    if (!this.dom.lineContainer.parentNode) {
+      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
     }
-    else { // orientation 'bottom'
-      var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
-      var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
+  };
 
-      box.style.top     = (this.parent.height - this.top - this.height || 0) + 'px';
-      line.style.top    = (itemSetHeight - lineHeight) + 'px';
-      line.style.bottom = '0';
+  /**
+   * Create the HTML DOM for the DataAxis
+   */
+  DataAxis.prototype.hide = function() {
+    this.hidden = true;
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
 
-    dot.style.top = (-this.props.dot.height / 2) + 'px';
+    if (this.dom.lineContainer.parentNode) {
+      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
+    }
   };
 
-  module.exports = BoxItem;
-
-
-/***/ },
-/* 23 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Item = __webpack_require__(20);
-
   /**
-   * @constructor PointItem
-   * @extends Item
-   * @param {Object} data             Object containing parameters start
-   *                                  content, className.
-   * @param {{toScreen: function, toTime: function}} conversion
-   *                                  Conversion functions from time to screen and vice versa
-   * @param {Object} [options]        Configuration options
-   *                                  // TODO: describe available options
+   * Set a range (start and end)
+   * @param end
+   * @param start
+   * @param end
    */
-  function PointItem (data, conversion, options) {
-    this.props = {
-      dot: {
-        top: 0,
-        width: 0,
-        height: 0
-      },
-      content: {
-        height: 0,
-        marginLeft: 0
-      }
-    };
-
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data);
+  DataAxis.prototype.setRange = function (start, end) {
+    if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
+      if (start > 0) {
+        start = 0;
       }
     }
-
-    Item.call(this, data, conversion, options);
-  }
-
-  PointItem.prototype = new Item (null, null, null);
-
-  /**
-   * Check whether this item is visible inside given range
-   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
-   * @returns {boolean} True if visible
-   */
-  PointItem.prototype.isVisible = function(range) {
-    // determine visibility
-    // TODO: account for the real width of the item. Right now we just add 1/4 to the window
-    var interval = (range.end - range.start) / 4;
-    return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
+    this.range.start = start;
+    this.range.end = end;
   };
 
   /**
-   * Repaint the item
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  PointItem.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
-
-      // background box
-      dom.point = document.createElement('div');
-      // className is updated in redraw()
-
-      // contents box, right from the dot
-      dom.content = document.createElement('div');
-      dom.content.className = 'content';
-      dom.point.appendChild(dom.content);
-
-      // dot at start
-      dom.dot = document.createElement('div');
-      dom.point.appendChild(dom.dot);
-
-      // attach this item as attribute
-      dom.point['timeline-item'] = this;
-
-      this.dirty = true;
-    }
+  DataAxis.prototype.redraw = function () {
+    var resized = false;
+    var activeGroups = 0;
+    
+    // Make sure the line container adheres to the vertical scrolling.
+    this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px';
 
-    // append DOM to parent DOM
-    if (!this.parent) {
-      throw new Error('Cannot redraw item: no parent attached');
-    }
-    if (!dom.point.parentNode) {
-      var foreground = this.parent.dom.foreground;
-      if (!foreground) {
-        throw new Error('Cannot redraw item: parent has no foreground container element');
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+          activeGroups++;
+        }
       }
-      foreground.appendChild(dom.point);
     }
-    this.displayed = true;
-
-    // Update DOM when item is marked dirty. An item is marked dirty when:
-    // - the item is not yet rendered
-    // - the item's data is changed
-    // - the item is selected/deselected
-    if (this.dirty) {
-      this._updateContents(this.dom.content);
-      this._updateTitle(this.dom.point);
-      this._updateDataAttributes(this.dom.point);
-      this._updateStyle(this.dom.point);
+    if (this.amountOfGroups == 0 || activeGroups == 0) {
+      this.hide();
+    }
+    else {
+      this.show();
+      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
 
-      // update class
-      var className = (this.data.className? ' ' + this.data.className : '') +
-          (this.selected ? ' selected' : '');
-      dom.point.className  = 'item point' + className;
-      dom.dot.className  = 'item dot' + className;
+      // svg offsetheight did not work in firefox and explorer...
+      this.dom.lineContainer.style.height = this.height + 'px';
+      this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
 
-      // recalculate size
-      this.width = dom.point.offsetWidth;
-      this.height = dom.point.offsetHeight;
-      this.props.dot.width = dom.dot.offsetWidth;
-      this.props.dot.height = dom.dot.offsetHeight;
-      this.props.content.height = dom.content.offsetHeight;
+      var props = this.props;
+      var frame = this.dom.frame;
 
-      // resize contents
-      dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
-      //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
+      // update classname
+      frame.className = 'dataaxis';
 
-      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
-      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
+      // calculate character width and height
+      this._calculateCharSize();
 
-      this.dirty = false;
-    }
+      var orientation = this.options.orientation;
+      var showMinorLabels = this.options.showMinorLabels;
+      var showMajorLabels = this.options.showMajorLabels;
 
-    this._repaintDeleteButton(dom.point);
-  };
+      // determine the width and height of the elements for the axis
+      props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+      props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
 
-  /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
-   */
-  PointItem.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
-    }
-  };
+      props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
+      props.minorLineHeight = 1;
+      props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
+      props.majorLineHeight = 1;
 
-  /**
-   * Hide the item from the DOM (when visible)
-   */
-  PointItem.prototype.hide = function() {
-    if (this.displayed) {
-      if (this.dom.point.parentNode) {
-        this.dom.point.parentNode.removeChild(this.dom.point);
+      //  take frame offline while updating (is almost twice as fast)
+      if (orientation == 'left') {
+        frame.style.top = '0';
+        frame.style.left = '0';
+        frame.style.bottom = '';
+        frame.style.width = this.width + 'px';
+        frame.style.height = this.height + "px";
+        this.props.width = this.body.domProps.left.width;
+        this.props.height = this.body.domProps.left.height;
+      }
+      else { // right
+        frame.style.top = '';
+        frame.style.bottom = '0';
+        frame.style.left = '0';
+        frame.style.width = this.width + 'px';
+        frame.style.height = this.height + "px";
+        this.props.width = this.body.domProps.right.width;
+        this.props.height = this.body.domProps.right.height;
       }
 
-      this.top = null;
-      this.left = null;
+      resized = this._redrawLabels();
+      resized = this._isResized() || resized;
 
-      this.displayed = false;
+      if (this.options.icons == true) {
+        this._redrawGroupIcons();
+      }
+      else {
+        this._cleanupIcons();
+      }
+
+      this._redrawTitle(orientation);
     }
+    return resized;
   };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Repaint major and minor text labels and vertical grid lines
+   * @private
    */
-  PointItem.prototype.repositionX = function() {
-    var start = this.conversion.toScreen(this.data.start);
-
-    this.left = start - this.props.dot.width;
-
-    // reposition point
-    this.dom.point.style.left = this.left + 'px';
-  };
+  DataAxis.prototype._redrawLabels = function () {
+    var resized = false;
+    DOMutil.prepareElements(this.DOMelements.lines);
+    DOMutil.prepareElements(this.DOMelements.labels);
 
-  /**
-   * Reposition the item vertically
-   * @Override
-   */
-  PointItem.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        point = this.dom.point;
+    var orientation = this.options['orientation'];
 
-    if (orientation == 'top') {
-      point.style.top = this.top + 'px';
-    }
-    else {
-      point.style.top = (this.parent.height - this.top - this.height) + 'px';
-    }
-  };
+    // calculate range and step (step such that we have space for 7 characters per label)
+    var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
 
-  module.exports = PointItem;
+    var step = new DataStep(
+      this.range.start,
+      this.range.end,
+      minimumStep,
+      this.dom.frame.offsetHeight,
+      this.options.customRange[this.options.orientation],
+      this.master == false && this.options.alignZeros       // doess the step have to align zeros? only if not master and the options is on
+    );
 
+    this.step = step;
+    // get the distance in pixels for a step
+    // dead space is space that is "left over" after a step
+    var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
 
-/***/ },
-/* 24 */
-/***/ function(module, exports, __webpack_require__) {
+    this.stepPixels = stepPixels;
 
-  var Hammer = __webpack_require__(45);
-  var Item = __webpack_require__(20);
+    var amountOfSteps = this.height / stepPixels;
+    var stepDifference = 0;
 
-  /**
-   * @constructor RangeItem
-   * @extends Item
-   * @param {Object} data             Object containing parameters start, end
-   *                                  content, className.
-   * @param {{toScreen: function, toTime: function}} conversion
-   *                                  Conversion functions from time to screen and vice versa
-   * @param {Object} [options]        Configuration options
-   *                                  // TODO: describe options
-   */
-  function RangeItem (data, conversion, options) {
-    this.props = {
-      content: {
-        width: 0
+    // the slave axis needs to use the same horizontal lines as the master axis.
+    if (this.master == false) {
+      stepPixels = this.stepPixelsForced;
+      stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
+      for (var i = 0; i < 0.5 * stepDifference; i++) {
+        step.previous();
       }
-    };
-    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
+      amountOfSteps = this.height / stepPixels;
 
-    // validate data
-    if (data) {
-      if (data.start == undefined) {
-        throw new Error('Property "start" missing in item ' + data.id);
-      }
-      if (data.end == undefined) {
-        throw new Error('Property "end" missing in item ' + data.id);
+      if (this.zeroCrossing != -1 && this.options.alignZeros == true) {
+        var zeroStepDifference = (step.marginEnd / step.step) - this.zeroCrossing;
+        if (zeroStepDifference > 0) {
+          for (var i = 0; i < zeroStepDifference; i++) {step.next();}
+        }
+        else if (zeroStepDifference < 0) {
+          for (var i = 0; i < -zeroStepDifference; i++) {step.previous();}
+        }
       }
     }
+    else {
+      amountOfSteps += 0.25;
+    }
 
-    Item.call(this, data, conversion, options);
-  }
 
-  RangeItem.prototype = new Item (null, null, null);
+    this.valueAtZero = step.marginEnd;
+    var marginStartPos = 0;
 
-  RangeItem.prototype.baseClassName = 'item range';
+    // do not draw the first label
+    var max = 1;
 
-  /**
-   * Check whether this item is visible inside given range
-   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
-   * @returns {boolean} True if visible
-   */
-  RangeItem.prototype.isVisible = function(range) {
-    // determine visibility
-    return (this.data.start < range.end) && (this.data.end > range.start);
-  };
+    // Get the number of decimal places
+    var decimals;
+    if(this.options.format[orientation] !== undefined) {
+      decimals = this.options.format[orientation].decimals;
+    }
 
-  /**
-   * Repaint the item
-   */
-  RangeItem.prototype.redraw = function() {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
+    this.maxLabelSize = 0;
+    var y = 0;
+    while (max < Math.round(amountOfSteps)) {
+      step.next();
+      y = Math.round(max * stepPixels);
+      marginStartPos = max * stepPixels;
+      var isMajor = step.isMajor();
 
-        // background box
-      dom.box = document.createElement('div');
-      // className is updated in redraw()
+      if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
+        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
+      }
 
-      // contents box
-      dom.content = document.createElement('div');
-      dom.content.className = 'content';
-      dom.box.appendChild(dom.content);
+      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
+          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
+        if (y >= 0) {
+          this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
+        }
+        this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+      }
+      else {
+        this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+      }
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
+      if (this.master == true && step.current == 0) {
+        this.zeroCrossing = max;
+      }
 
-      this.dirty = true;
+      max++;
     }
 
-    // append DOM to parent DOM
-    if (!this.parent) {
-      throw new Error('Cannot redraw item: no parent attached');
+    if (this.master == false) {
+      this.conversionFactor = y / (this.valueAtZero - step.current);
     }
-    if (!dom.box.parentNode) {
-      var foreground = this.parent.dom.foreground;
-      if (!foreground) {
-        throw new Error('Cannot redraw item: parent has no foreground container element');
-      }
-      foreground.appendChild(dom.box);
+    else {
+      this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
     }
-    this.displayed = true;
 
-    // Update DOM when item is marked dirty. An item is marked dirty when:
-    // - the item is not yet rendered
-    // - the item's data is changed
-    // - the item is selected/deselected
-    if (this.dirty) {
-      this._updateContents(this.dom.content);
-      this._updateTitle(this.dom.box);
-      this._updateDataAttributes(this.dom.box);
-      this._updateStyle(this.dom.box);
-
-      // update class
-      var className = (this.data.className ? (' ' + this.data.className) : '') +
-          (this.selected ? ' selected' : '');
-      dom.box.className = this.baseClassName + className;
-
-      // determine from css whether this box has overflow
-      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
-
-      // recalculate size
-      // turn off max-width to be able to calculate the real width
-      // this causes an extra browser repaint/reflow, but so be it
-      this.dom.content.style.maxWidth = 'none';
-      this.props.content.width = this.dom.content.offsetWidth;
-      this.height = this.dom.box.offsetHeight;
-      this.dom.content.style.maxWidth = '';
+    // Note that title is rotated, so we're using the height, not width!
+    var titleWidth = 0;
+    if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
+      titleWidth = this.props.titleCharHeight;
+    }
+    var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
 
-      this.dirty = false;
+    // this will resize the yAxis to accommodate the labels.
+    if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
+      this.width = this.maxLabelSize + offset;
+      this.options.width = this.width + "px";
+      DOMutil.cleanupElements(this.DOMelements.lines);
+      DOMutil.cleanupElements(this.DOMelements.labels);
+      this.redraw();
+      resized = true;
+    }
+    // this will resize the yAxis if it is too big for the labels.
+    else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
+      this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
+      this.options.width = this.width + "px";
+      DOMutil.cleanupElements(this.DOMelements.lines);
+      DOMutil.cleanupElements(this.DOMelements.labels);
+      this.redraw();
+      resized = true;
+    }
+    else {
+      DOMutil.cleanupElements(this.DOMelements.lines);
+      DOMutil.cleanupElements(this.DOMelements.labels);
+      resized = false;
     }
 
-    this._repaintDeleteButton(dom.box);
-    this._repaintDragLeft();
-    this._repaintDragRight();
+    return resized;
+  };
+
+  DataAxis.prototype.convertValue = function (value) {
+    var invertedValue = this.valueAtZero - value;
+    var convertedValue = invertedValue * this.conversionFactor;
+    return convertedValue;
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * Create a label for the axis at position x
+   * @private
+   * @param y
+   * @param text
+   * @param orientation
+   * @param className
+   * @param characterHeight
    */
-  RangeItem.prototype.show = function() {
-    if (!this.displayed) {
-      this.redraw();
+  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
+    // reuse redundant label
+    var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
+    label.className = className;
+    label.innerHTML = text;
+    if (orientation == 'left') {
+      label.style.left = '-' + this.options.labelOffsetX + 'px';
+      label.style.textAlign = "right";
+    }
+    else {
+      label.style.right = '-' + this.options.labelOffsetX + 'px';
+      label.style.textAlign = "left";
+    }
+
+    label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
+
+    text += '';
+
+    var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
+    if (this.maxLabelSize < text.length * largestWidth) {
+      this.maxLabelSize = text.length * largestWidth;
     }
   };
 
   /**
-   * Hide the item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Create a minor line for the axis at position y
+   * @param y
+   * @param orientation
+   * @param className
+   * @param offset
+   * @param width
    */
-  RangeItem.prototype.hide = function() {
-    if (this.displayed) {
-      var box = this.dom.box;
+  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
+    if (this.master == true) {
+      var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
+      line.className = className;
+      line.innerHTML = '';
 
-      if (box.parentNode) {
-        box.parentNode.removeChild(box);
+      if (orientation == 'left') {
+        line.style.left = (this.width - offset) + 'px';
+      }
+      else {
+        line.style.right = (this.width - offset) + 'px';
       }
 
-      this.top = null;
-      this.left = null;
-
-      this.displayed = false;
+      line.style.width = width + 'px';
+      line.style.top = y + 'px';
     }
   };
 
   /**
-   * Reposition the item horizontally
-   * @Override
+   * Create a title for the axis
+   * @private
+   * @param orientation
    */
-  RangeItem.prototype.repositionX = function() {
-    var parentWidth = this.parent.width;
-    var start = this.conversion.toScreen(this.data.start);
-    var end = this.conversion.toScreen(this.data.end);
-    var contentLeft;
-    var contentWidth;
+  DataAxis.prototype._redrawTitle = function (orientation) {
+    DOMutil.prepareElements(this.DOMelements.title);
 
-    // limit the width of the this, as browsers cannot draw very wide divs
-    if (start < -parentWidth) {
-      start = -parentWidth;
-    }
-    if (end > 2 * parentWidth) {
-      end = 2 * parentWidth;
-    }
-    var boxWidth = Math.max(end - start, 1);
+    // Check if the title is defined for this axes
+    if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
+      var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
+      title.className = 'yAxis title ' + orientation;
+      title.innerHTML = this.options.title[orientation].text;
 
-    if (this.overflow) {
-      this.left = start;
-      this.width = boxWidth + this.props.content.width;
-      contentWidth = this.props.content.width;
+      // Add style - if provided
+      if (this.options.title[orientation].style !== undefined) {
+        util.addCssText(title, this.options.title[orientation].style);
+      }
 
-      // Note: The calculation of width is an optimistic calculation, giving
-      //       a width which will not change when moving the Timeline
-      //       So no re-stacking needed, which is nicer for the eye;
-    }
-    else {
-      this.left = start;
-      this.width = boxWidth;
-      contentWidth = Math.min(end - start - 2 * this.options.padding, this.props.content.width);
-    }
+      if (orientation == 'left') {
+        title.style.left = this.props.titleCharHeight + 'px';
+      }
+      else {
+        title.style.right = this.props.titleCharHeight + 'px';
+      }
 
-    this.dom.box.style.left = this.left + 'px';
-    this.dom.box.style.width = boxWidth + 'px';
+      title.style.width = this.height + 'px';
+    }
 
-    switch (this.options.align) {
-      case 'left':
-        this.dom.content.style.left = '0';
-        break;
+    // we need to clean up in case we did not use all elements.
+    DOMutil.cleanupElements(this.DOMelements.title);
+  };
 
-      case 'right':
-        this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
-        break;
 
-      case 'center':
-        this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
-        break;
 
-      default: // 'auto'
-        // when range exceeds left of the window, position the contents at the left of the visible area
-        if (this.overflow) {
-          if (end > 0) {
-            contentLeft = Math.max(-start, 0);
-          }
-          else {
-            contentLeft = -contentWidth; // ensure it's not visible anymore
-          }
-        }
-        else {
-          if (start < 0) {
-            contentLeft = Math.min(-start,
-                (end - start - contentWidth - 2 * this.options.padding));
-            // TODO: remove the need for options.padding. it's terrible.
-          }
-          else {
-            contentLeft = 0;
-          }
-        }
-        this.dom.content.style.left = contentLeft + 'px';
-    }
-  };
 
   /**
-   * Reposition the item vertically
-   * @Override
+   * Determine the size of text on the axis (both major and minor axis).
+   * The size is calculated only once and then cached in this.props.
+   * @private
    */
-  RangeItem.prototype.repositionY = function() {
-    var orientation = this.options.orientation,
-        box = this.dom.box;
+  DataAxis.prototype._calculateCharSize = function () {
+    // determine the char width and height on the minor axis
+    if (!('minorCharHeight' in this.props)) {
+      var textMinor = document.createTextNode('0');
+      var measureCharMinor = document.createElement('div');
+      measureCharMinor.className = 'yAxis minor measure';
+      measureCharMinor.appendChild(textMinor);
+      this.dom.frame.appendChild(measureCharMinor);
 
-    if (orientation == 'top') {
-      box.style.top = this.top + 'px';
-    }
-    else {
-      box.style.top = (this.parent.height - this.top - this.height) + 'px';
+      this.props.minorCharHeight = measureCharMinor.clientHeight;
+      this.props.minorCharWidth = measureCharMinor.clientWidth;
+
+      this.dom.frame.removeChild(measureCharMinor);
     }
-  };
 
-  /**
-   * Repaint a drag area on the left side of the range when the range is selected
-   * @protected
-   */
-  RangeItem.prototype._repaintDragLeft = function () {
-    if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
-      // create and show drag area
-      var dragLeft = document.createElement('div');
-      dragLeft.className = 'drag-left';
-      dragLeft.dragLeftItem = this;
+    if (!('majorCharHeight' in this.props)) {
+      var textMajor = document.createTextNode('0');
+      var measureCharMajor = document.createElement('div');
+      measureCharMajor.className = 'yAxis major measure';
+      measureCharMajor.appendChild(textMajor);
+      this.dom.frame.appendChild(measureCharMajor);
 
-      // TODO: this should be redundant?
-      Hammer(dragLeft, {
-        preventDefault: true
-      }).on('drag', function () {
-            //console.log('drag left')
-          });
+      this.props.majorCharHeight = measureCharMajor.clientHeight;
+      this.props.majorCharWidth = measureCharMajor.clientWidth;
 
-      this.dom.box.appendChild(dragLeft);
-      this.dom.dragLeft = dragLeft;
+      this.dom.frame.removeChild(measureCharMajor);
     }
-    else if (!this.selected && this.dom.dragLeft) {
-      // delete drag area
-      if (this.dom.dragLeft.parentNode) {
-        this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
-      }
-      this.dom.dragLeft = null;
+
+    if (!('titleCharHeight' in this.props)) {
+      var textTitle = document.createTextNode('0');
+      var measureCharTitle = document.createElement('div');
+      measureCharTitle.className = 'yAxis title measure';
+      measureCharTitle.appendChild(textTitle);
+      this.dom.frame.appendChild(measureCharTitle);
+
+      this.props.titleCharHeight = measureCharTitle.clientHeight;
+      this.props.titleCharWidth = measureCharTitle.clientWidth;
+
+      this.dom.frame.removeChild(measureCharTitle);
     }
   };
 
   /**
-   * Repaint a drag area on the right side of the range when the range is selected
-   * @protected
+   * Snap a date to a rounded value.
+   * The snap intervals are dependent on the current scale and step.
+   * @param {Date} date   the date to be snapped.
+   * @return {Date} snappedDate
    */
-  RangeItem.prototype._repaintDragRight = function () {
-    if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
-      // create and show drag area
-      var dragRight = document.createElement('div');
-      dragRight.className = 'drag-right';
-      dragRight.dragRightItem = this;
-
-      // TODO: this should be redundant?
-      Hammer(dragRight, {
-        preventDefault: true
-      }).on('drag', function () {
-        //console.log('drag right')
-      });
-
-      this.dom.box.appendChild(dragRight);
-      this.dom.dragRight = dragRight;
-    }
-    else if (!this.selected && this.dom.dragRight) {
-      // delete drag area
-      if (this.dom.dragRight.parentNode) {
-        this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
-      }
-      this.dom.dragRight = null;
-    }
+  DataAxis.prototype.snap = function(date) {
+    return this.step.snap(date);
   };
 
-  module.exports = RangeItem;
+  module.exports = DataAxis;
 
 
 /***/ },
-/* 25 */
+/* 24 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(2);
+  var Line = __webpack_require__(54);
+  var Bar = __webpack_require__(53);
+  var Points = __webpack_require__(55);
+
   /**
-   * Prototype for visual components
-   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
-   * @param {Object} [options]
+   * /**
+   * @param {object} group            | the object of the group from the dataset
+   * @param {string} groupId          | ID of the group
+   * @param {object} options          | the default options
+   * @param {array} groupsUsingDefaultStyles  | this array has one entree.
+   *                                            It is passed as an array so it is passed by reference.
+   *                                            It enumerates through the default styles
+   * @constructor
    */
-  function Component (body, options) {
-    this.options = null;
-    this.props = null;
+  function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
+    this.id = groupId;
+    var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
+    this.options = util.selectiveBridgeObject(fields,options);
+    this.usingDefaultStyle = group.className === undefined;
+    this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
+    this.zeroPosition = 0;
+    this.update(group);
+    if (this.usingDefaultStyle == true) {
+      this.groupsUsingDefaultStyles[0] += 1;
+    }
+    this.itemsData = [];
+    this.visible = group.visible === undefined ? true : group.visible;
   }
 
+
   /**
-   * Set options for the component. The new options will be merged into the
-   * current options.
-   * @param {Object} options
+   * this loads a reference to all items in this group into this group.
+   * @param {array} items
    */
-  Component.prototype.setOptions = function(options) {
-    if (options) {
-      util.extend(this.options, options);
+  GraphGroup.prototype.setItems = function(items) {
+    if (items != null) {
+      this.itemsData = items;
+      if (this.options.sort == true) {
+        this.itemsData.sort(function (a,b) {return a.x - b.x;})
+      }
+    }
+    else {
+      this.itemsData = [];
     }
   };
 
+
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * this is used for plotting barcharts, this way, we only have to calculate it once.
+   * @param pos
    */
-  Component.prototype.redraw = function() {
-    // should be implemented by the component
-    return false;
+  GraphGroup.prototype.setZeroPosition = function(pos) {
+    this.zeroPosition = pos;
   };
 
+
   /**
-   * Destroy the component. Cleanup DOM and event listeners
+   * set the options of the graph group over the default options.
+   * @param options
    */
-  Component.prototype.destroy = function() {
-    // should be implemented by the component
+  GraphGroup.prototype.setOptions = function(options) {
+    if (options !== undefined) {
+      var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
+      util.selectiveDeepExtend(fields, this.options, options);
+
+      util.mergeOptions(this.options, options,'catmullRom');
+      util.mergeOptions(this.options, options,'drawPoints');
+      util.mergeOptions(this.options, options,'shaded');
+
+      if (options.catmullRom) {
+        if (typeof options.catmullRom == 'object') {
+          if (options.catmullRom.parametrization) {
+            if (options.catmullRom.parametrization == 'uniform') {
+              this.options.catmullRom.alpha = 0;
+            }
+            else if (options.catmullRom.parametrization == 'chordal') {
+              this.options.catmullRom.alpha = 1.0;
+            }
+            else {
+              this.options.catmullRom.parametrization = 'centripetal';
+              this.options.catmullRom.alpha = 0.5;
+            }
+          }
+        }
+      }
+    }
+
+    if (this.options.style == 'line') {
+      this.type = new Line(this.id, this.options);
+    }
+    else if (this.options.style == 'bar') {
+      this.type = new Bar(this.id, this.options);
+    }
+    else if (this.options.style == 'points') {
+      this.type = new Points(this.id, this.options);
+    }
   };
 
+
   /**
-   * Test whether the component is resized since the last time _isResized() was
-   * called.
-   * @return {Boolean} Returns true if the component is resized
-   * @protected
+   * this updates the current group class with the latest group dataset entree, used in _updateGroup in linegraph
+   * @param group
    */
-  Component.prototype._isResized = function() {
-    var resized = (this.props._previousWidth !== this.props.width ||
-        this.props._previousHeight !== this.props.height);
+  GraphGroup.prototype.update = function(group) {
+    this.group = group;
+    this.content = group.content || 'graph';
+    this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
+    this.visible = group.visible === undefined ? true : group.visible;
+    this.style = group.style;
+    this.setOptions(group.options);
+  };
 
-    this.props._previousWidth = this.props.width;
-    this.props._previousHeight = this.props.height;
 
-    return resized;
+  /**
+   * draw the icon for the legend.
+   *
+   * @param x
+   * @param y
+   * @param JSONcontainer
+   * @param SVGcontainer
+   * @param iconWidth
+   * @param iconHeight
+   */
+  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
+    var fillHeight = iconHeight * 0.5;
+    var path, fillPath;
+
+    var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
+    outline.setAttributeNS(null, "x", x);
+    outline.setAttributeNS(null, "y", y - fillHeight);
+    outline.setAttributeNS(null, "width", iconWidth);
+    outline.setAttributeNS(null, "height", 2*fillHeight);
+    outline.setAttributeNS(null, "class", "outline");
+
+    if (this.options.style == 'line') {
+      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+      path.setAttributeNS(null, "class", this.className);
+      if(this.style !== undefined) {
+        path.setAttributeNS(null, "style", this.style);
+      }
+
+      path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
+      if (this.options.shaded.enabled == true) {
+        fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+        if (this.options.shaded.orientation == 'top') {
+          fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
+            "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
+        }
+        else {
+          fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
+            "L"+x+"," + (y + fillHeight) + " " +
+            "L"+ (x + iconWidth) + "," + (y + fillHeight) +
+            "L"+ (x + iconWidth) + ","+y);
+        }
+        fillPath.setAttributeNS(null, "class", this.className + " iconFill");
+      }
+
+      if (this.options.drawPoints.enabled == true) {
+        DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
+      }
+    }
+    else {
+      var barWidth = Math.round(0.3 * iconWidth);
+      var bar1Height = Math.round(0.4 * iconHeight);
+      var bar2Height = Math.round(0.75 * iconHeight);
+
+      var offset = Math.round((iconWidth - (2 * barWidth))/3);
+
+      DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+      DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+    }
   };
 
-  module.exports = Component;
+
+  /**
+   * return the legend entree for this group.
+   *
+   * @param iconWidth
+   * @param iconHeight
+   * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
+   */
+  GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
+    var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+    this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
+    return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
+  }
+
+  GraphGroup.prototype.getYRange = function(groupData) {
+    return this.type.getYRange(groupData);
+  }
+
+  GraphGroup.prototype.draw = function(dataset, group, framework) {
+    this.type.draw(dataset, group, framework);
+  }
+
+
+  module.exports = GraphGroup;
 
 
 /***/ },
-/* 26 */
+/* 25 */
 /***/ function(module, exports, __webpack_require__) {
 
   var util = __webpack_require__(1);
-  var Component = __webpack_require__(25);
-  var moment = __webpack_require__(44);
-  var locales = __webpack_require__(48);
+  var stack = __webpack_require__(18);
+  var RangeItem = __webpack_require__(35);
 
   /**
-   * A current time bar
-   * @param {{range: Range, dom: Object, domProps: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCurrentTime]
-   * @constructor CurrentTime
-   * @extends Component
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  function CurrentTime (body, options) {
-    this.body = body;
+  function Group (groupId, data, itemSet) {
+    this.groupId = groupId;
+    this.subgroups = {};
+    this.subgroupIndex = 0;
+    this.subgroupOrderer = data && data.subgroupOrder;
+    this.itemSet = itemSet;
 
-    // default options
-    this.defaultOptions = {
-      showCurrentTime: true,
+    this.dom = {};
+    this.props = {
+      label: {
+        width: 0,
+        height: 0
+      }
+    };
+    this.className = null;
 
-      locales: locales,
-      locale: 'en'
+    this.items = {};        // items filtered by groupId of this group
+    this.visibleItems = []; // items currently visible in window
+    this.orderedItems = {
+      byStart: [],
+      byEnd: []
     };
-    this.options = util.extend({}, this.defaultOptions);
-    this.offset = 0;
+    this.checkRangedItems = false; // needed to refresh the ranged items if the window is programatically changed with NO overlap.
+    var me = this;
+    this.itemSet.body.emitter.on("checkRangedItems", function () {
+      me.checkRangedItems = true;
+    })
 
     this._create();
 
-    this.setOptions(options);
+    this.setData(data);
   }
 
-  CurrentTime.prototype = new Component();
-
   /**
-   * Create the HTML DOM for the current time bar
+   * Create DOM elements for the group
    * @private
    */
-  CurrentTime.prototype._create = function() {
-    var bar = document.createElement('div');
-    bar.className = 'currenttime';
-    bar.style.position = 'absolute';
-    bar.style.top = '0px';
-    bar.style.height = '100%';
+  Group.prototype._create = function() {
+    var label = document.createElement('div');
+    label.className = 'vlabel';
+    this.dom.label = label;
 
-    this.bar = bar;
-  };
+    var inner = document.createElement('div');
+    inner.className = 'inner';
+    label.appendChild(inner);
+    this.dom.inner = inner;
 
-  /**
-   * Destroy the CurrentTime bar
-   */
-  CurrentTime.prototype.destroy = function () {
-    this.options.showCurrentTime = false;
-    this.redraw(); // will remove the bar from the DOM and stop refreshing
+    var foreground = document.createElement('div');
+    foreground.className = 'group';
+    foreground['timeline-group'] = this;
+    this.dom.foreground = foreground;
 
-    this.body = null;
+    this.dom.background = document.createElement('div');
+    this.dom.background.className = 'group';
+
+    this.dom.axis = document.createElement('div');
+    this.dom.axis.className = 'group';
+
+    // create a hidden marker to detect when the Timelines container is attached
+    // to the DOM, or the style of a parent of the Timeline is changed from
+    // display:none is changed to visible.
+    this.dom.marker = document.createElement('div');
+    this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
+    this.dom.marker.innerHTML = '?';
+    this.dom.background.appendChild(this.dom.marker);
   };
 
   /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCurrentTime]
+   * Set the group data for this group
+   * @param {Object} data   Group data, can contain properties content and className
    */
-  CurrentTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCurrentTime', 'locale', 'locales'], this.options, options);
+  Group.prototype.setData = function(data) {
+    // update contents
+    var content = data && data.content;
+    if (content instanceof Element) {
+      this.dom.inner.appendChild(content);
+    }
+    else if (content !== undefined && content !== null) {
+      this.dom.inner.innerHTML = content;
+    }
+    else {
+      this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
     }
-  };
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  CurrentTime.prototype.redraw = function() {
-    if (this.options.showCurrentTime) {
-      var parent = this.body.dom.backgroundVertical;
-      if (this.bar.parentNode != parent) {
-        // attach to the dom
-        if (this.bar.parentNode) {
-          this.bar.parentNode.removeChild(this.bar);
-        }
-        parent.appendChild(this.bar);
-
-        this.start();
-      }
-
-      var now = new Date(new Date().valueOf() + this.offset);
-      var x = this.body.util.toScreen(now);
-
-      var locale = this.options.locales[this.options.locale];
-      var title = locale.current + ' ' + locale.time + ': ' + moment(now).format('dddd, MMMM Do YYYY, H:mm:ss');
-      title = title.charAt(0).toUpperCase() + title.substring(1);
+    // update title
+    this.dom.label.title = data && data.title || '';
 
-      this.bar.style.left = x + 'px';
-      this.bar.title = title;
+    if (!this.dom.inner.firstChild) {
+      util.addClassName(this.dom.inner, 'hidden');
     }
     else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
-      }
-      this.stop();
+      util.removeClassName(this.dom.inner, 'hidden');
     }
 
-    return false;
-  };
-
-  /**
-   * Start auto refreshing the current time bar
-   */
-  CurrentTime.prototype.start = function() {
-    var me = this;
-
-    function update () {
-      me.stop();
-
-      // determine interval to refresh
-      var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
-      var interval = 1 / scale / 10;
-      if (interval < 30)   interval = 30;
-      if (interval > 1000) interval = 1000;
-
-      me.redraw();
-
-      // start a timer to adjust for the new time
-      me.currentTimeTimer = setTimeout(update, interval);
+    // update className
+    var className = data && data.className || null;
+    if (className != this.className) {
+      if (this.className) {
+        util.removeClassName(this.dom.label, this.className);
+        util.removeClassName(this.dom.foreground, this.className);
+        util.removeClassName(this.dom.background, this.className);
+        util.removeClassName(this.dom.axis, this.className);
+      }
+      util.addClassName(this.dom.label, className);
+      util.addClassName(this.dom.foreground, className);
+      util.addClassName(this.dom.background, className);
+      util.addClassName(this.dom.axis, className);
+      this.className = className;
     }
 
-    update();
-  };
-
-  /**
-   * Stop auto refreshing the current time bar
-   */
-  CurrentTime.prototype.stop = function() {
-    if (this.currentTimeTimer !== undefined) {
-      clearTimeout(this.currentTimeTimer);
-      delete this.currentTimeTimer;
+    // update style
+    if (this.style) {
+      util.removeCssText(this.dom.label, this.style);
+      this.style = null;
+    }
+    if (data && data.style) {
+      util.addCssText(this.dom.label, data.style);
+      this.style = data.style;
     }
   };
 
   /**
-   * Set a current time. This can be used for example to ensure that a client's
-   * time is synchronized with a shared server time.
-   * @param {Date | String | Number} time     A Date, unix timestamp, or
-   *                                          ISO date string.
+   * Get the width of the group label
+   * @return {number} width
    */
-  CurrentTime.prototype.setCurrentTime = function(time) {
-    var t = util.convert(time, 'Date').valueOf();
-    var now = new Date().valueOf();
-    this.offset = t - now;
-    this.redraw();
+  Group.prototype.getLabelWidth = function() {
+    return this.props.label.width;
   };
 
+
   /**
-   * Get the current time.
-   * @return {Date} Returns the current time.
+   * Repaint this group
+   * @param {{start: number, end: number}} range
+   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+   * @param {boolean} [restack=false]  Force restacking of all items
+   * @return {boolean} Returns true if the group is resized
    */
-  CurrentTime.prototype.getCurrentTime = function() {
-    return new Date(new Date().valueOf() + this.offset);
-  };
+  Group.prototype.redraw = function(range, margin, restack) {
+    var resized = false;
 
-  module.exports = CurrentTime;
+    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
 
+    // force recalculation of the height of the items when the marker height changed
+    // (due to the Timeline being attached to the DOM or changed from display:none to visible)
+    var markerHeight = this.dom.marker.clientHeight;
+    if (markerHeight != this.lastMarkerHeight) {
+      this.lastMarkerHeight = markerHeight;
 
-/***/ },
-/* 27 */
-/***/ function(module, exports, __webpack_require__) {
+      util.forEach(this.items, function (item) {
+        item.dirty = true;
+        if (item.displayed) item.redraw();
+      });
 
-  var Hammer = __webpack_require__(45);
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(25);
-  var moment = __webpack_require__(44);
-  var locales = __webpack_require__(48);
+      restack = true;
+    }
 
-  /**
-   * A custom time bar
-   * @param {{range: Range, dom: Object}} body
-   * @param {Object} [options]        Available parameters:
-   *                                  {Boolean} [showCustomTime]
-   * @constructor CustomTime
-   * @extends Component
-   */
+    // reposition visible items vertically
+    if (this.itemSet.options.stack) { // TODO: ugly way to access options...
+      stack.stack(this.visibleItems, margin, restack);
+    }
+    else { // no stacking
+      stack.nostack(this.visibleItems, margin, this.subgroups);
+    }
 
-  function CustomTime (body, options) {
-    this.body = body;
+    // recalculate the height of the group
+    var height = this._calculateHeight(margin);
 
-    // default options
-    this.defaultOptions = {
-      showCustomTime: false,
-      locales: locales,
-      locale: 'en'
-    };
-    this.options = util.extend({}, this.defaultOptions);
+    // calculate actual size and position
+    var foreground = this.dom.foreground;
+    this.top = foreground.offsetTop;
+    this.left = foreground.offsetLeft;
+    this.width = foreground.offsetWidth;
+    resized = util.updateProperty(this, 'height', height) || resized;
 
-    this.customTime = new Date();
-    this.eventParams = {}; // stores state parameters while dragging the bar
+    // recalculate size of label
+    resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
+    resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
 
-    // create the DOM
-    this._create();
+    // apply new height
+    this.dom.background.style.height  = height + 'px';
+    this.dom.foreground.style.height  = height + 'px';
+    this.dom.label.style.height = height + 'px';
 
-    this.setOptions(options);
-  }
+    // update vertical position of items after they are re-stacked and the height of the group is calculated
+    for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
+      var item = this.visibleItems[i];
+      item.repositionY(margin);
+    }
 
-  CustomTime.prototype = new Component();
+    return resized;
+  };
 
   /**
-   * Set options for the component. Options will be merged in current options.
-   * @param {Object} options  Available parameters:
-   *                          {boolean} [showCustomTime]
+   * recalculate the height of the group
+   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+   * @returns {number} Returns the height
+   * @private
    */
-  CustomTime.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
+  Group.prototype._calculateHeight = function (margin) {
+    // recalculate the height of the group
+    var height;
+    var visibleItems = this.visibleItems;
+    //var visibleSubgroups = [];
+    //this.visibleSubgroups = 0;
+    this.resetSubgroups();
+    var me = this;
+    if (visibleItems.length) {
+      var min = visibleItems[0].top;
+      var max = visibleItems[0].top + visibleItems[0].height;
+      util.forEach(visibleItems, function (item) {
+        min = Math.min(min, item.top);
+        max = Math.max(max, (item.top + item.height));
+        if (item.data.subgroup !== undefined) {
+          me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height,item.height);
+          me.subgroups[item.data.subgroup].visible = true;
+          //if (visibleSubgroups.indexOf(item.data.subgroup) == -1){
+          //  visibleSubgroups.push(item.data.subgroup);
+          //  me.visibleSubgroups += 1;
+          //}
+        }
+      });
+      if (min > margin.axis) {
+        // there is an empty gap between the lowest item and the axis
+        var offset = min - margin.axis;
+        max -= offset;
+        util.forEach(visibleItems, function (item) {
+          item.top -= offset;
+        });
+      }
+      height = max + margin.item.vertical / 2;
+    }
+    else {
+      height = margin.axis + margin.item.vertical;
     }
+    height = Math.max(height, this.props.label.height);
+
+    return height;
   };
 
   /**
-   * Create the DOM for the custom time
-   * @private
+   * Show this group: attach to the DOM
    */
-  CustomTime.prototype._create = function() {
-    var bar = document.createElement('div');
-    bar.className = 'customtime';
-    bar.style.position = 'absolute';
-    bar.style.top = '0px';
-    bar.style.height = '100%';
-    this.bar = bar;
+  Group.prototype.show = function() {
+    if (!this.dom.label.parentNode) {
+      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+    }
 
-    var drag = document.createElement('div');
-    drag.style.position = 'relative';
-    drag.style.top = '0px';
-    drag.style.left = '-10px';
-    drag.style.height = '100%';
-    drag.style.width = '20px';
-    bar.appendChild(drag);
+    if (!this.dom.foreground.parentNode) {
+      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
+    }
 
-    // attach event listeners
-    this.hammer = Hammer(bar, {
-      prevent_default: true
-    });
-    this.hammer.on('dragstart', this._onDragStart.bind(this));
-    this.hammer.on('drag',      this._onDrag.bind(this));
-    this.hammer.on('dragend',   this._onDragEnd.bind(this));
+    if (!this.dom.background.parentNode) {
+      this.itemSet.dom.background.appendChild(this.dom.background);
+    }
+
+    if (!this.dom.axis.parentNode) {
+      this.itemSet.dom.axis.appendChild(this.dom.axis);
+    }
   };
 
   /**
-   * Destroy the CustomTime bar
+   * Hide this group: remove from the DOM
    */
-  CustomTime.prototype.destroy = function () {
-    this.options.showCustomTime = false;
-    this.redraw(); // will remove the bar from the DOM
+  Group.prototype.hide = function() {
+    var label = this.dom.label;
+    if (label.parentNode) {
+      label.parentNode.removeChild(label);
+    }
 
-    this.hammer.enable(false);
-    this.hammer = null;
+    var foreground = this.dom.foreground;
+    if (foreground.parentNode) {
+      foreground.parentNode.removeChild(foreground);
+    }
 
-    this.body = null;
+    var background = this.dom.background;
+    if (background.parentNode) {
+      background.parentNode.removeChild(background);
+    }
+
+    var axis = this.dom.axis;
+    if (axis.parentNode) {
+      axis.parentNode.removeChild(axis);
+    }
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * Add an item to the group
+   * @param {Item} item
    */
-  CustomTime.prototype.redraw = function () {
-    if (this.options.showCustomTime) {
-      var parent = this.body.dom.backgroundVertical;
-      if (this.bar.parentNode != parent) {
-        // attach to the dom
-        if (this.bar.parentNode) {
-          this.bar.parentNode.removeChild(this.bar);
-        }
-        parent.appendChild(this.bar);
+  Group.prototype.add = function(item) {
+    this.items[item.id] = item;
+    item.setParent(this);
+
+    // add to
+    if (item.data.subgroup !== undefined) {
+      if (this.subgroups[item.data.subgroup] === undefined) {
+        this.subgroups[item.data.subgroup] = {height:0, visible: false, index:this.subgroupIndex, items: []};
+        this.subgroupIndex++;
       }
+      this.subgroups[item.data.subgroup].items.push(item);
+    }
+    this.orderSubgroups();
 
-      var x = this.body.util.toScreen(this.customTime);
+    if (this.visibleItems.indexOf(item) == -1) {
+      var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
+      this._checkIfVisible(item, this.visibleItems, range);
+    }
+  };
 
-      var locale = this.options.locales[this.options.locale];
-      var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
-      title = title.charAt(0).toUpperCase() + title.substring(1);
+  Group.prototype.orderSubgroups = function() {
+    if (this.subgroupOrderer !== undefined) {
+      var sortArray = [];
+      if (typeof this.subgroupOrderer == 'string') {
+        for (var subgroup in this.subgroups) {
+          sortArray.push({subgroup: subgroup, sortField: this.subgroups[subgroup].items[0].data[this.subgroupOrderer]})
+        }
+        sortArray.sort(function (a, b) {
+          return a.sortField - b.sortField;
+        })
+      }
+      else if (typeof this.subgroupOrderer == 'function') {
+        for (var subgroup in this.subgroups) {
+          sortArray.push(this.subgroups[subgroup].items[0].data);
+        }
+        sortArray.sort(this.subgroupOrderer);
+      }
 
-      this.bar.style.left = x + 'px';
-      this.bar.title = title;
-    }
-    else {
-      // remove the line from the DOM
-      if (this.bar.parentNode) {
-        this.bar.parentNode.removeChild(this.bar);
+      if (sortArray.length > 0) {
+        for (var i = 0; i < sortArray.length; i++) {
+          this.subgroups[sortArray[i].subgroup].index = i;
+        }
       }
     }
+  };
 
-    return false;
+  Group.prototype.resetSubgroups = function() {
+    for (var subgroup in this.subgroups) {
+      if (this.subgroups.hasOwnProperty(subgroup)) {
+        this.subgroups[subgroup].visible = false;
+      }
+    }
   };
 
   /**
-   * Set custom time.
-   * @param {Date | number | string} time
+   * Remove an item from the group
+   * @param {Item} item
    */
-  CustomTime.prototype.setCustomTime = function(time) {
-    this.customTime = util.convert(time, 'Date');
-    this.redraw();
+  Group.prototype.remove = function(item) {
+    delete this.items[item.id];
+    item.setParent(null);
+
+    // remove from visible items
+    var index = this.visibleItems.indexOf(item);
+    if (index != -1) this.visibleItems.splice(index, 1);
+
+    // TODO: also remove from ordered items?
   };
 
+
   /**
-   * Retrieve the current custom time.
-   * @return {Date} customTime
+   * Remove an item from the corresponding DataSet
+   * @param {Item} item
    */
-  CustomTime.prototype.getCustomTime = function() {
-    return new Date(this.customTime.valueOf());
+  Group.prototype.removeFromDataSet = function(item) {
+    this.itemSet.removeItem(item.id);
   };
 
+
   /**
-   * Start moving horizontally
-   * @param {Event} event
-   * @private
+   * Reorder the items
    */
-  CustomTime.prototype._onDragStart = function(event) {
-    this.eventParams.dragging = true;
-    this.eventParams.customTime = this.customTime;
+  Group.prototype.order = function() {
+    var array = util.toArray(this.items);
+    var startArray = [];
+    var endArray = [];
 
-    event.stopPropagation();
-    event.preventDefault();
+    for (var i = 0; i < array.length; i++) {
+      if (array[i].data.end !== undefined) {
+        endArray.push(array[i]);
+      }
+      startArray.push(array[i]);
+    }
+    this.orderedItems = {
+      byStart: startArray,
+      byEnd: endArray
+    };
+
+    stack.orderByStart(this.orderedItems.byStart);
+    stack.orderByEnd(this.orderedItems.byEnd);
   };
 
+
   /**
-   * Perform moving operating.
-   * @param {Event} event
+   * Update the visible items
+   * @param {{byStart: Item[], byEnd: Item[]}} orderedItems   All items ordered by start date and by end date
+   * @param {Item[]} visibleItems                             The previously visible items.
+   * @param {{start: number, end: number}} range              Visible range
+   * @return {Item[]} visibleItems                            The new visible items.
    * @private
    */
-  CustomTime.prototype._onDrag = function (event) {
-    if (!this.eventParams.dragging) return;
-
-    var deltaX = event.gesture.deltaX,
-        x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
-        time = this.body.util.toTime(x);
-
-    this.setCustomTime(time);
+  Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, range) {
+    var visibleItems = [];
+    var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
+    var interval = (range.end - range.start) / 4;
+    var lowerBound = range.start - interval;
+    var upperBound = range.end + interval;
+    var item, i;
 
-    // fire a timechange event
-    this.body.emitter.emit('timechange', {
-      time: new Date(this.customTime.valueOf())
-    });
+    // this function is used to do the binary search.
+    var searchFunction = function (value) {
+      if      (value < lowerBound)  {return -1;}
+      else if (value <= upperBound) {return  0;}
+      else                          {return  1;}
+    }
 
-    event.stopPropagation();
-    event.preventDefault();
-  };
+    // first check if the items that were in view previously are still in view.
+    // IMPORTANT: this handles the case for the items with startdate before the window and enddate after the window!
+    // also cleans up invisible items.
+    if (oldVisibleItems.length > 0) {
+      for (i = 0; i < oldVisibleItems.length; i++) {
+        this._checkIfVisibleWithReference(oldVisibleItems[i], visibleItems, visibleItemsLookup, range);
+      }
+    }
 
-  /**
-   * Stop moving operating.
-   * @param {event} event
-   * @private
-   */
-  CustomTime.prototype._onDragEnd = function (event) {
-    if (!this.eventParams.dragging) return;
+    // we do a binary search for the items that have only start values.
+    var initialPosByStart = util.binarySearchCustom(orderedItems.byStart, searchFunction, 'data','start');
 
-    // fire a timechanged event
-    this.body.emitter.emit('timechanged', {
-      time: new Date(this.customTime.valueOf())
+    // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the start values.
+    this._traceVisible(initialPosByStart, orderedItems.byStart, visibleItems, visibleItemsLookup, function (item) {
+      return (item.data.start < lowerBound || item.data.start > upperBound);
     });
 
-    event.stopPropagation();
-    event.preventDefault();
-  };
+    // if the window has changed programmatically without overlapping the old window, the ranged items with start < lowerBound and end > upperbound are not shown.
+    // We therefore have to brute force check all items in the byEnd list
+    if (this.checkRangedItems == true) {
+      this.checkRangedItems = false;
+      for (i = 0; i < orderedItems.byEnd.length; i++) {
+        this._checkIfVisibleWithReference(orderedItems.byEnd[i], visibleItems, visibleItemsLookup, range);
+      }
+    }
+    else {
+      // we do a binary search for the items that have defined end times.
+      var initialPosByEnd = util.binarySearchCustom(orderedItems.byEnd, searchFunction, 'data','end');
 
-  module.exports = CustomTime;
+      // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the end values.
+      this._traceVisible(initialPosByEnd, orderedItems.byEnd, visibleItems, visibleItemsLookup, function (item) {
+        return (item.data.end < lowerBound || item.data.end > upperBound);
+      });
+    }
 
 
-/***/ },
-/* 28 */
-/***/ function(module, exports, __webpack_require__) {
+    // finally, we reposition all the visible items.
+    for (i = 0; i < visibleItems.length; i++) {
+      item = visibleItems[i];
+      if (!item.displayed) item.show();
+      // reposition item horizontally
+      item.repositionX();
+    }
+
+    // debug
+    //console.log("new line")
+    //if (this.groupId == null) {
+    //  for (i = 0; i < orderedItems.byStart.length; i++) {
+    //    item = orderedItems.byStart[i].data;
+    //    console.log('start',i,initialPosByStart, item.start.valueOf(), item.content, item.start >= lowerBound && item.start <= upperBound,i == initialPosByStart ? "<------------------- HEREEEE" : "")
+    //  }
+    //  for (i = 0; i < orderedItems.byEnd.length; i++) {
+    //    item = orderedItems.byEnd[i].data;
+    //    console.log('rangeEnd',i,initialPosByEnd, item.end.valueOf(), item.content, item.end >= range.start && item.end <= range.end,i == initialPosByEnd ? "<------------------- HEREEEE" : "")
+    //  }
+    //}
+
+    return visibleItems;
+  };
+
+  Group.prototype._traceVisible = function (initialPos, items, visibleItems, visibleItemsLookup, breakCondition) {
+    var item;
+    var i;
+
+    if (initialPos != -1) {
+      for (i = initialPos; i >= 0; i--) {
+        item = items[i];
+        if (breakCondition(item)) {
+          break;
+        }
+        else {
+          if (visibleItemsLookup[item.id] === undefined) {
+            visibleItemsLookup[item.id] = true;
+            visibleItems.push(item);
+          }
+        }
+      }
+
+      for (i = initialPos + 1; i < items.length; i++) {
+        item = items[i];
+        if (breakCondition(item)) {
+          break;
+        }
+        else {
+          if (visibleItemsLookup[item.id] === undefined) {
+            visibleItemsLookup[item.id] = true;
+            visibleItems.push(item);
+          }
+        }
+      }
+    }
+  }
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Component = __webpack_require__(25);
-  var DataStep = __webpack_require__(16);
 
   /**
-   * A horizontal time axis
-   * @param {Object} [options]        See DataAxis.setOptions for the available
-   *                                  options.
-   * @constructor DataAxis
-   * @extends Component
-   * @param body
+   * this function is very similar to the _checkIfInvisible() but it does not
+   * return booleans, hides the item if it should not be seen and always adds to
+   * the visibleItems.
+   * this one is for brute forcing and hiding.
+   *
+   * @param {Item} item
+   * @param {Array} visibleItems
+   * @param {{start:number, end:number}} range
+   * @private
    */
-  function DataAxis (body, options, svg, linegraphOptions) {
-    this.id = util.randomUUID();
-    this.body = body;
+  Group.prototype._checkIfVisible = function(item, visibleItems, range) {
+      if (item.isVisible(range)) {
+        if (!item.displayed) item.show();
+        // reposition item horizontally
+        item.repositionX();
+        visibleItems.push(item);
+      }
+      else {
+        if (item.displayed) item.hide();
+      }
+  };
 
-    this.defaultOptions = {
-      orientation: 'left',  // supported: 'left', 'right'
-      showMinorLabels: true,
-      showMajorLabels: true,
-      icons: true,
-      majorLinesOffset: 7,
-      minorLinesOffset: 4,
-      labelOffsetX: 10,
-      labelOffsetY: 2,
-      iconWidth: 20,
-      width: '40px',
-      visible: true,
-      alignZeros: true,
-      customRange: {
-        left: {min:undefined, max:undefined},
-        right: {min:undefined, max:undefined}
-      },
-      title: {
-        left: {text:undefined},
-        right: {text:undefined}
-      },
-      format: {
-        left: {decimals: undefined},
-        right: {decimals: undefined}
+
+  /**
+   * this function is very similar to the _checkIfInvisible() but it does not
+   * return booleans, hides the item if it should not be seen and always adds to
+   * the visibleItems.
+   * this one is for brute forcing and hiding.
+   *
+   * @param {Item} item
+   * @param {Array} visibleItems
+   * @param {{start:number, end:number}} range
+   * @private
+   */
+  Group.prototype._checkIfVisibleWithReference = function(item, visibleItems, visibleItemsLookup, range) {
+    if (item.isVisible(range)) {
+      if (visibleItemsLookup[item.id] === undefined) {
+        visibleItemsLookup[item.id] = true;
+        visibleItems.push(item);
       }
-    };
+    }
+    else {
+      if (item.displayed) item.hide();
+    }
+  };
 
-    this.linegraphOptions = linegraphOptions;
-    this.linegraphSVG = svg;
-    this.props = {};
-    this.DOMelements = { // dynamic elements
-      lines: {},
-      labels: {},
-      title: {}
-    };
 
-    this.dom = {};
 
-    this.range = {start:0, end:0};
+  module.exports = Group;
 
-    this.options = util.extend({}, this.defaultOptions);
-    this.conversionFactor = 1;
 
-    this.setOptions(options);
-    this.width = Number(('' + this.options.width).replace("px",""));
-    this.minWidth = this.width;
-    this.height = this.linegraphSVG.offsetHeight;
-    this.hidden = false;
+/***/ },
+/* 26 */
+/***/ function(module, exports, __webpack_require__) {
 
-    this.stepPixels = 25;
-    this.stepPixelsForced = 25;
-    this.zeroCrossing = -1;
+  var util = __webpack_require__(1);
+  var Group = __webpack_require__(25);
 
-    this.lineOffset = 0;
-    this.master = true;
-    this.svgElements = {};
-    this.iconsRemoved = false;
+  /**
+   * @constructor BackgroundGroup
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
+   */
+  function BackgroundGroup (groupId, data, itemSet) {
+    Group.call(this, groupId, data, itemSet);
 
+    this.width = 0;
+    this.height = 0;
+    this.top = 0;
+    this.left = 0;
+  }
 
-    this.groups = {};
-    this.amountOfGroups = 0;
+  BackgroundGroup.prototype = Object.create(Group.prototype);
 
-    // create the HTML DOM
-    this._create();
+  /**
+   * Repaint this group
+   * @param {{start: number, end: number}} range
+   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+   * @param {boolean} [restack=false]  Force restacking of all items
+   * @return {boolean} Returns true if the group is resized
+   */
+  BackgroundGroup.prototype.redraw = function(range, margin, restack) {
+    var resized = false;
 
-    var me = this;
-    this.body.emitter.on("verticalDrag", function() {
-      me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px';
-    });
-  }
+    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
 
-  DataAxis.prototype = new Component();
+    // calculate actual size
+    this.width = this.dom.background.offsetWidth;
 
+    // apply new height (just always zero for BackgroundGroup
+    this.dom.background.style.height  = '0';
 
-  DataAxis.prototype.addGroup = function(label, graphOptions) {
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
+    // update vertical position of items after they are re-stacked and the height of the group is calculated
+    for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
+      var item = this.visibleItems[i];
+      item.repositionY(margin);
     }
-    this.amountOfGroups += 1;
-  };
 
-  DataAxis.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
+    return resized;
   };
 
-  DataAxis.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
+  /**
+   * Show this group: attach to the DOM
+   */
+  BackgroundGroup.prototype.show = function() {
+    if (!this.dom.background.parentNode) {
+      this.itemSet.dom.background.appendChild(this.dom.background);
     }
   };
 
+  module.exports = BackgroundGroup;
 
-  DataAxis.prototype.setOptions = function (options) {
-    if (options) {
-      var redraw = false;
-      if (this.options.orientation != options.orientation && options.orientation !== undefined) {
-        redraw = true;
-      }
-      var fields = [
-        'orientation',
-        'showMinorLabels',
-        'showMajorLabels',
-        'icons',
-        'majorLinesOffset',
-        'minorLinesOffset',
-        'labelOffsetX',
-        'labelOffsetY',
-        'iconWidth',
-        'width',
-        'visible',
-        'customRange',
-        'title',
-        'format',
-        'alignZeros'
-      ];
-      util.selectiveExtend(fields, this.options, options);
 
-      this.minWidth = Number(('' + this.options.width).replace("px",""));
+/***/ },
+/* 27 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(45);
+  var util = __webpack_require__(1);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Component = __webpack_require__(20);
+  var Group = __webpack_require__(25);
+  var BackgroundGroup = __webpack_require__(26);
+  var BoxItem = __webpack_require__(33);
+  var PointItem = __webpack_require__(34);
+  var RangeItem = __webpack_require__(35);
+  var BackgroundItem = __webpack_require__(32);
 
-      if (redraw == true && this.dom.frame) {
-        this.hide();
-        this.show();
-      }
-    }
-  };
 
+  var UNGROUPED = '__ungrouped__';   // reserved group id for ungrouped items
+  var BACKGROUND = '__background__'; // reserved group id for background items without group
 
   /**
-   * Create the HTML DOM for the DataAxis
+   * An ItemSet holds a set of items and ranges which can be displayed in a
+   * range. The width is determined by the parent of the ItemSet, and the height
+   * is determined by the size of the items.
+   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
+   * @param {Object} [options]      See ItemSet.setOptions for the available options.
+   * @constructor ItemSet
+   * @extends Component
    */
-  DataAxis.prototype._create = function() {
-    this.dom.frame = document.createElement('div');
-    this.dom.frame.style.width = this.options.width;
-    this.dom.frame.style.height = this.height;
+  function ItemSet(body, options) {
+    this.body = body;
 
-    this.dom.lineContainer = document.createElement('div');
-    this.dom.lineContainer.style.width = '100%';
-    this.dom.lineContainer.style.height = this.height;
-    this.dom.lineContainer.style.position = 'relative';
+    this.defaultOptions = {
+      type: null,  // 'box', 'point', 'range', 'background'
+      orientation: 'bottom',  // 'top' or 'bottom'
+      align: 'auto', // alignment of box items
+      stack: true,
+      groupOrder: null,
 
-    // create svg element for graph drawing.
-    this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
-    this.svg.style.position = "absolute";
-    this.svg.style.top = '0px';
-    this.svg.style.height = '100%';
-    this.svg.style.width = '100%';
-    this.svg.style.display = "block";
-    this.dom.frame.appendChild(this.svg);
-  };
+      selectable: true,
+      editable: {
+        updateTime: false,
+        updateGroup: false,
+        add: false,
+        remove: false
+      },
 
-  DataAxis.prototype._redrawGroupIcons = function () {
-    DOMutil.prepareElements(this.svgElements);
+      onAdd: function (item, callback) {
+        callback(item);
+      },
+      onUpdate: function (item, callback) {
+        callback(item);
+      },
+      onMove: function (item, callback) {
+        callback(item);
+      },
+      onRemove: function (item, callback) {
+        callback(item);
+      },
+      onMoving: function (item, callback) {
+        callback(item);
+      },
 
-    var x;
-    var iconWidth = this.options.iconWidth;
-    var iconHeight = 15;
-    var iconOffset = 4;
-    var y = iconOffset + 0.5 * iconHeight;
+      margin: {
+        item: {
+          horizontal: 10,
+          vertical: 10
+        },
+        axis: 20
+      },
+      padding: 5
+    };
 
-    if (this.options.orientation == 'left') {
-      x = iconOffset;
-    }
-    else {
-      x = this.width - iconWidth - iconOffset;
-    }
+    // options is shared by this ItemSet and all its items
+    this.options = util.extend({}, this.defaultOptions);
 
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-          this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-          y += iconHeight + iconOffset;
-        }
-      }
-    }
+    // options for getting items from the DataSet with the correct type
+    this.itemOptions = {
+      type: {start: 'Date', end: 'Date'}
+    };
 
-    DOMutil.cleanupElements(this.svgElements);
-    this.iconsRemoved = false;
-  };
+    this.conversion = {
+      toScreen: body.util.toScreen,
+      toTime: body.util.toTime
+    };
+    this.dom = {};
+    this.props = {};
+    this.hammer = null;
 
-  DataAxis.prototype._cleanupIcons = function() {
-    if (this.iconsRemoved == false) {
-      DOMutil.prepareElements(this.svgElements);
-      DOMutil.cleanupElements(this.svgElements);
-      this.iconsRemoved = true;
-    }
-  }
+    var me = this;
+    this.itemsData = null;    // DataSet
+    this.groupsData = null;   // DataSet
 
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.show = function() {
-    this.hidden = false;
-    if (!this.dom.frame.parentNode) {
-      if (this.options.orientation == 'left') {
-        this.body.dom.left.appendChild(this.dom.frame);
+    // listeners for the DataSet of the items
+    this.itemListeners = {
+      'add': function (event, params, senderId) {
+        me._onAdd(params.items);
+      },
+      'update': function (event, params, senderId) {
+        me._onUpdate(params.items);
+      },
+      'remove': function (event, params, senderId) {
+        me._onRemove(params.items);
       }
-      else {
-        this.body.dom.right.appendChild(this.dom.frame);
+    };
+
+    // listeners for the DataSet of the groups
+    this.groupListeners = {
+      'add': function (event, params, senderId) {
+        me._onAddGroups(params.items);
+      },
+      'update': function (event, params, senderId) {
+        me._onUpdateGroups(params.items);
+      },
+      'remove': function (event, params, senderId) {
+        me._onRemoveGroups(params.items);
       }
-    }
+    };
 
-    if (!this.dom.lineContainer.parentNode) {
-      this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
-    }
-  };
+    this.items = {};      // object with an Item for every data item
+    this.groups = {};     // Group object for every group
+    this.groupIds = [];
 
-  /**
-   * Create the HTML DOM for the DataAxis
-   */
-  DataAxis.prototype.hide = function() {
-    this.hidden = true;
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
-    }
+    this.selection = [];  // list with the ids of all selected nodes
+    this.stackDirty = true; // if true, all items will be restacked on next redraw
 
-    if (this.dom.lineContainer.parentNode) {
-      this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
-    }
-  };
+    this.touchParams = {}; // stores properties while dragging
+    // create the HTML DOM
 
-  /**
-   * Set a range (start and end)
-   * @param end
-   * @param start
-   * @param end
-   */
-  DataAxis.prototype.setRange = function (start, end) {
-    if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
-      if (start > 0) {
-        start = 0;
-      }
-    }
-    this.range.start = start;
-    this.range.end = end;
+    this._create();
+
+    this.setOptions(options);
+  }
+
+  ItemSet.prototype = new Component();
+
+  // available item types will be registered here
+  ItemSet.types = {
+    background: BackgroundItem,
+    box: BoxItem,
+    range: RangeItem,
+    point: PointItem
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * Create the HTML DOM for the ItemSet
    */
-  DataAxis.prototype.redraw = function () {
-    var resized = false;
-    var activeGroups = 0;
-    
-    // Make sure the line container adheres to the vertical scrolling.
-    this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px';
+  ItemSet.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'itemset';
+    frame['timeline-itemset'] = this;
+    this.dom.frame = frame;
 
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-          activeGroups++;
-        }
-      }
-    }
-    if (this.amountOfGroups == 0 || activeGroups == 0) {
-      this.hide();
-    }
-    else {
-      this.show();
-      this.height = Number(this.linegraphSVG.style.height.replace("px",""));
+    // create background panel
+    var background = document.createElement('div');
+    background.className = 'background';
+    frame.appendChild(background);
+    this.dom.background = background;
 
-      // svg offsetheight did not work in firefox and explorer...
-      this.dom.lineContainer.style.height = this.height + 'px';
-      this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
+    // create foreground panel
+    var foreground = document.createElement('div');
+    foreground.className = 'foreground';
+    frame.appendChild(foreground);
+    this.dom.foreground = foreground;
 
-      var props = this.props;
-      var frame = this.dom.frame;
+    // create axis panel
+    var axis = document.createElement('div');
+    axis.className = 'axis';
+    this.dom.axis = axis;
 
-      // update classname
-      frame.className = 'dataaxis';
+    // create labelset
+    var labelSet = document.createElement('div');
+    labelSet.className = 'labelset';
+    this.dom.labelSet = labelSet;
 
-      // calculate character width and height
-      this._calculateCharSize();
+    // create ungrouped Group
+    this._updateUngrouped();
 
-      var orientation = this.options.orientation;
-      var showMinorLabels = this.options.showMinorLabels;
-      var showMajorLabels = this.options.showMajorLabels;
+    // create background Group
+    var backgroundGroup = new BackgroundGroup(BACKGROUND, null, this);
+    backgroundGroup.show();
+    this.groups[BACKGROUND] = backgroundGroup;
 
-      // determine the width and height of the elements for the axis
-      props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
-      props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+    // attach event listeners
+    // Note: we bind to the centerContainer for the case where the height
+    //       of the center container is larger than of the ItemSet, so we
+    //       can click in the empty area to create a new item or deselect an item.
+    this.hammer = Hammer(this.body.dom.centerContainer, {
+      preventDefault: true
+    });
 
-      props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
-      props.minorLineHeight = 1;
-      props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
-      props.majorLineHeight = 1;
+    // drag items when selected
+    this.hammer.on('touch',     this._onTouch.bind(this));
+    this.hammer.on('dragstart', this._onDragStart.bind(this));
+    this.hammer.on('drag',      this._onDrag.bind(this));
+    this.hammer.on('dragend',   this._onDragEnd.bind(this));
 
-      //  take frame offline while updating (is almost twice as fast)
-      if (orientation == 'left') {
-        frame.style.top = '0';
-        frame.style.left = '0';
-        frame.style.bottom = '';
-        frame.style.width = this.width + 'px';
-        frame.style.height = this.height + "px";
-        this.props.width = this.body.domProps.left.width;
-        this.props.height = this.body.domProps.left.height;
-      }
-      else { // right
-        frame.style.top = '';
-        frame.style.bottom = '0';
-        frame.style.left = '0';
-        frame.style.width = this.width + 'px';
-        frame.style.height = this.height + "px";
-        this.props.width = this.body.domProps.right.width;
-        this.props.height = this.body.domProps.right.height;
-      }
+    // single select (or unselect) when tapping an item
+    this.hammer.on('tap',  this._onSelectItem.bind(this));
 
-      resized = this._redrawLabels();
-      resized = this._isResized() || resized;
+    // multi select when holding mouse/touch, or on ctrl+click
+    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
 
-      if (this.options.icons == true) {
-        this._redrawGroupIcons();
-      }
-      else {
-        this._cleanupIcons();
-      }
+    // add item on doubletap
+    this.hammer.on('doubletap', this._onAddItem.bind(this));
 
-      this._redrawTitle(orientation);
-    }
-    return resized;
+    // attach to the DOM
+    this.show();
   };
 
   /**
-   * Repaint major and minor text labels and vertical grid lines
-   * @private
+   * Set options for the ItemSet. Existing options will be extended/overwritten.
+   * @param {Object} [options] The following options are available:
+   *                           {String} type
+   *                              Default type for the items. Choose from 'box'
+   *                              (default), 'point', 'range', or 'background'.
+   *                              The default style can be overwritten by
+   *                              individual items.
+   *                           {String} align
+   *                              Alignment for the items, only applicable for
+   *                              BoxItem. Choose 'center' (default), 'left', or
+   *                              'right'.
+   *                           {String} orientation
+   *                              Orientation of the item set. Choose 'top' or
+   *                              'bottom' (default).
+   *                           {Function} groupOrder
+   *                              A sorting function for ordering groups
+   *                           {Boolean} stack
+   *                              If true (deafult), items will be stacked on
+   *                              top of each other.
+   *                           {Number} margin.axis
+   *                              Margin between the axis and the items in pixels.
+   *                              Default is 20.
+   *                           {Number} margin.item.horizontal
+   *                              Horizontal margin between items in pixels.
+   *                              Default is 10.
+   *                           {Number} margin.item.vertical
+   *                              Vertical Margin between items in pixels.
+   *                              Default is 10.
+   *                           {Number} margin.item
+   *                              Margin between items in pixels in both horizontal
+   *                              and vertical direction. Default is 10.
+   *                           {Number} margin
+   *                              Set margin for both axis and items in pixels.
+   *                           {Number} padding
+   *                              Padding of the contents of an item in pixels.
+   *                              Must correspond with the items css. Default is 5.
+   *                           {Boolean} selectable
+   *                              If true (default), items can be selected.
+   *                           {Boolean} editable
+   *                              Set all editable options to true or false
+   *                           {Boolean} editable.updateTime
+   *                              Allow dragging an item to an other moment in time
+   *                           {Boolean} editable.updateGroup
+   *                              Allow dragging an item to an other group
+   *                           {Boolean} editable.add
+   *                              Allow creating new items on double tap
+   *                           {Boolean} editable.remove
+   *                              Allow removing items by clicking the delete button
+   *                              top right of a selected item.
+   *                           {Function(item: Item, callback: Function)} onAdd
+   *                              Callback function triggered when an item is about to be added:
+   *                              when the user double taps an empty space in the Timeline.
+   *                           {Function(item: Item, callback: Function)} onUpdate
+   *                              Callback function fired when an item is about to be updated.
+   *                              This function typically has to show a dialog where the user
+   *                              change the item. If not implemented, nothing happens.
+   *                           {Function(item: Item, callback: Function)} onMove
+   *                              Fired when an item has been moved. If not implemented,
+   *                              the move action will be accepted.
+   *                           {Function(item: Item, callback: Function)} onRemove
+   *                              Fired when an item is about to be deleted.
+   *                              If not implemented, the item will be always removed.
    */
-  DataAxis.prototype._redrawLabels = function () {
-    var resized = false;
-    DOMutil.prepareElements(this.DOMelements.lines);
-    DOMutil.prepareElements(this.DOMelements.labels);
-
-    var orientation = this.options['orientation'];
-
-    // calculate range and step (step such that we have space for 7 characters per label)
-    var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
-
-    var step = new DataStep(
-      this.range.start,
-      this.range.end,
-      minimumStep,
-      this.dom.frame.offsetHeight,
-      this.options.customRange[this.options.orientation],
-      this.master == false && this.options.alignZeros       // doess the step have to align zeros? only if not master and the options is on
-    );
-
-    this.step = step;
-    // get the distance in pixels for a step
-    // dead space is space that is "left over" after a step
-    var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
-
-    this.stepPixels = stepPixels;
-
-    var amountOfSteps = this.height / stepPixels;
-    var stepDifference = 0;
+  ItemSet.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide'];
+      util.selectiveExtend(fields, this.options, options);
 
-    // the slave axis needs to use the same horizontal lines as the master axis.
-    if (this.master == false) {
-      stepPixels = this.stepPixelsForced;
-      stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
-      for (var i = 0; i < 0.5 * stepDifference; i++) {
-        step.previous();
+      if ('margin' in options) {
+        if (typeof options.margin === 'number') {
+          this.options.margin.axis = options.margin;
+          this.options.margin.item.horizontal = options.margin;
+          this.options.margin.item.vertical = options.margin;
+        }
+        else if (typeof options.margin === 'object') {
+          util.selectiveExtend(['axis'], this.options.margin, options.margin);
+          if ('item' in options.margin) {
+            if (typeof options.margin.item === 'number') {
+              this.options.margin.item.horizontal = options.margin.item;
+              this.options.margin.item.vertical = options.margin.item;
+            }
+            else if (typeof options.margin.item === 'object') {
+              util.selectiveExtend(['horizontal', 'vertical'], this.options.margin.item, options.margin.item);
+            }
+          }
+        }
       }
-      amountOfSteps = this.height / stepPixels;
 
-      if (this.zeroCrossing != -1 && this.options.alignZeros == true) {
-        var zeroStepDifference = (step.marginEnd / step.step) - this.zeroCrossing;
-        if (zeroStepDifference > 0) {
-          for (var i = 0; i < zeroStepDifference; i++) {step.next();}
+      if ('editable' in options) {
+        if (typeof options.editable === 'boolean') {
+          this.options.editable.updateTime  = options.editable;
+          this.options.editable.updateGroup = options.editable;
+          this.options.editable.add         = options.editable;
+          this.options.editable.remove      = options.editable;
         }
-        else if (zeroStepDifference < 0) {
-          for (var i = 0; i < -zeroStepDifference; i++) {step.previous();}
+        else if (typeof options.editable === 'object') {
+          util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
         }
       }
-    }
-    else {
-      amountOfSteps += 0.25;
-    }
-
-
-    this.valueAtZero = step.marginEnd;
-    var marginStartPos = 0;
 
-    // do not draw the first label
-    var max = 1;
+      // callback functions
+      var addCallback = (function (name) {
+        var fn = options[name];
+        if (fn) {
+          if (!(fn instanceof Function)) {
+            throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
+          }
+          this.options[name] = fn;
+        }
+      }).bind(this);
+      ['onAdd', 'onUpdate', 'onRemove', 'onMove', 'onMoving'].forEach(addCallback);
 
-    // Get the number of decimal places
-    var decimals;
-    if(this.options.format[orientation] !== undefined) {
-      decimals = this.options.format[orientation].decimals;
+      // force the itemSet to refresh: options like orientation and margins may be changed
+      this.markDirty();
     }
+  };
 
-    this.maxLabelSize = 0;
-    var y = 0;
-    while (max < Math.round(amountOfSteps)) {
-      step.next();
-      y = Math.round(max * stepPixels);
-      marginStartPos = max * stepPixels;
-      var isMajor = step.isMajor();
-
-      if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
-        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
-      }
+  /**
+   * Mark the ItemSet dirty so it will refresh everything with next redraw
+   */
+  ItemSet.prototype.markDirty = function() {
+    this.groupIds = [];
+    this.stackDirty = true;
+  };
 
-      if (isMajor && this.options['showMajorLabels'] && this.master == true ||
-          this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
-        if (y >= 0) {
-          this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
-        }
-        this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
-      }
-      else {
-        this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
-      }
+  /**
+   * Destroy the ItemSet
+   */
+  ItemSet.prototype.destroy = function() {
+    this.hide();
+    this.setItems(null);
+    this.setGroups(null);
 
-      if (this.master == true && step.current == 0) {
-        this.zeroCrossing = max;
-      }
+    this.hammer = null;
 
-      max++;
-    }
+    this.body = null;
+    this.conversion = null;
+  };
 
-    if (this.master == false) {
-      this.conversionFactor = y / (this.valueAtZero - step.current);
-    }
-    else {
-      this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
+  /**
+   * Hide the component from the DOM
+   */
+  ItemSet.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
 
-    // Note that title is rotated, so we're using the height, not width!
-    var titleWidth = 0;
-    if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
-      titleWidth = this.props.titleCharHeight;
+    // remove the axis with dots
+    if (this.dom.axis.parentNode) {
+      this.dom.axis.parentNode.removeChild(this.dom.axis);
     }
-    var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
 
-    // this will resize the yAxis to accommodate the labels.
-    if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
-      this.width = this.maxLabelSize + offset;
-      this.options.width = this.width + "px";
-      DOMutil.cleanupElements(this.DOMelements.lines);
-      DOMutil.cleanupElements(this.DOMelements.labels);
-      this.redraw();
-      resized = true;
-    }
-    // this will resize the yAxis if it is too big for the labels.
-    else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
-      this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
-      this.options.width = this.width + "px";
-      DOMutil.cleanupElements(this.DOMelements.lines);
-      DOMutil.cleanupElements(this.DOMelements.labels);
-      this.redraw();
-      resized = true;
-    }
-    else {
-      DOMutil.cleanupElements(this.DOMelements.lines);
-      DOMutil.cleanupElements(this.DOMelements.labels);
-      resized = false;
+    // remove the labelset containing all group labels
+    if (this.dom.labelSet.parentNode) {
+      this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
     }
-
-    return resized;
-  };
-
-  DataAxis.prototype.convertValue = function (value) {
-    var invertedValue = this.valueAtZero - value;
-    var convertedValue = invertedValue * this.conversionFactor;
-    return convertedValue;
   };
 
   /**
-   * Create a label for the axis at position x
-   * @private
-   * @param y
-   * @param text
-   * @param orientation
-   * @param className
-   * @param characterHeight
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
    */
-  DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
-    // reuse redundant label
-    var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
-    label.className = className;
-    label.innerHTML = text;
-    if (orientation == 'left') {
-      label.style.left = '-' + this.options.labelOffsetX + 'px';
-      label.style.textAlign = "right";
-    }
-    else {
-      label.style.right = '-' + this.options.labelOffsetX + 'px';
-      label.style.textAlign = "left";
+  ItemSet.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
     }
 
-    label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
-
-    text += '';
+    // show axis with dots
+    if (!this.dom.axis.parentNode) {
+      this.body.dom.backgroundVertical.appendChild(this.dom.axis);
+    }
 
-    var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
-    if (this.maxLabelSize < text.length * largestWidth) {
-      this.maxLabelSize = text.length * largestWidth;
+    // show labelset containing labels
+    if (!this.dom.labelSet.parentNode) {
+      this.body.dom.left.appendChild(this.dom.labelSet);
     }
   };
 
   /**
-   * Create a minor line for the axis at position y
-   * @param y
-   * @param orientation
-   * @param className
-   * @param offset
-   * @param width
+   * Set selected items by their id. Replaces the current selection
+   * Unknown id's are silently ignored.
+   * @param {string[] | string} [ids] An array with zero or more id's of the items to be
+   *                                  selected, or a single item id. If ids is undefined
+   *                                  or an empty array, all items will be unselected.
    */
-  DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
-    if (this.master == true) {
-      var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
-      line.className = className;
-      line.innerHTML = '';
+  ItemSet.prototype.setSelection = function(ids) {
+    var i, ii, id, item;
 
-      if (orientation == 'left') {
-        line.style.left = (this.width - offset) + 'px';
-      }
-      else {
-        line.style.right = (this.width - offset) + 'px';
-      }
+    if (ids == undefined) ids = [];
+    if (!Array.isArray(ids)) ids = [ids];
 
-      line.style.width = width + 'px';
-      line.style.top = y + 'px';
+    // unselect currently selected items
+    for (i = 0, ii = this.selection.length; i < ii; i++) {
+      id = this.selection[i];
+      item = this.items[id];
+      if (item) item.unselect();
+    }
+
+    // select items
+    this.selection = [];
+    for (i = 0, ii = ids.length; i < ii; i++) {
+      id = ids[i];
+      item = this.items[id];
+      if (item) {
+        this.selection.push(id);
+        item.select();
+      }
     }
   };
 
   /**
-   * Create a title for the axis
-   * @private
-   * @param orientation
+   * Get the selected items by their id
+   * @return {Array} ids  The ids of the selected items
    */
-  DataAxis.prototype._redrawTitle = function (orientation) {
-    DOMutil.prepareElements(this.DOMelements.title);
+  ItemSet.prototype.getSelection = function() {
+    return this.selection.concat([]);
+  };
 
-    // Check if the title is defined for this axes
-    if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
-      var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
-      title.className = 'yAxis title ' + orientation;
-      title.innerHTML = this.options.title[orientation].text;
+  /**
+   * Get the id's of the currently visible items.
+   * @returns {Array} The ids of the visible items
+   */
+  ItemSet.prototype.getVisibleItems = function() {
+    var range = this.body.range.getRange();
+    var left  = this.body.util.toScreen(range.start);
+    var right = this.body.util.toScreen(range.end);
 
-      // Add style - if provided
-      if (this.options.title[orientation].style !== undefined) {
-        util.addCssText(title, this.options.title[orientation].style);
-      }
+    var ids = [];
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        var group = this.groups[groupId];
+        var rawVisibleItems = group.visibleItems;
 
-      if (orientation == 'left') {
-        title.style.left = this.props.titleCharHeight + 'px';
-      }
-      else {
-        title.style.right = this.props.titleCharHeight + 'px';
+        // filter the "raw" set with visibleItems into a set which is really
+        // visible by pixels
+        for (var i = 0; i < rawVisibleItems.length; i++) {
+          var item = rawVisibleItems[i];
+          // TODO: also check whether visible vertically
+          if ((item.left < right) && (item.left + item.width > left)) {
+            ids.push(item.id);
+          }
+        }
       }
-
-      title.style.width = this.height + 'px';
     }
 
-    // we need to clean up in case we did not use all elements.
-    DOMutil.cleanupElements(this.DOMelements.title);
+    return ids;
   };
 
-
-
-
   /**
-   * Determine the size of text on the axis (both major and minor axis).
-   * The size is calculated only once and then cached in this.props.
+   * Deselect a selected item
+   * @param {String | Number} id
    * @private
    */
-  DataAxis.prototype._calculateCharSize = function () {
-    // determine the char width and height on the minor axis
-    if (!('minorCharHeight' in this.props)) {
-      var textMinor = document.createTextNode('0');
-      var measureCharMinor = document.createElement('div');
-      measureCharMinor.className = 'yAxis minor measure';
-      measureCharMinor.appendChild(textMinor);
-      this.dom.frame.appendChild(measureCharMinor);
-
-      this.props.minorCharHeight = measureCharMinor.clientHeight;
-      this.props.minorCharWidth = measureCharMinor.clientWidth;
-
-      this.dom.frame.removeChild(measureCharMinor);
+  ItemSet.prototype._deselect = function(id) {
+    var selection = this.selection;
+    for (var i = 0, ii = selection.length; i < ii; i++) {
+      if (selection[i] == id) { // non-strict comparison!
+        selection.splice(i, 1);
+        break;
+      }
     }
+  };
 
-    if (!('majorCharHeight' in this.props)) {
-      var textMajor = document.createTextNode('0');
-      var measureCharMajor = document.createElement('div');
-      measureCharMajor.className = 'yAxis major measure';
-      measureCharMajor.appendChild(textMajor);
-      this.dom.frame.appendChild(measureCharMajor);
+  /**
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
+   */
+  ItemSet.prototype.redraw = function() {
+    var margin = this.options.margin,
+        range = this.body.range,
+        asSize = util.option.asSize,
+        options = this.options,
+        orientation = options.orientation,
+        resized = false,
+        frame = this.dom.frame,
+        editable = options.editable.updateTime || options.editable.updateGroup;
 
-      this.props.majorCharHeight = measureCharMajor.clientHeight;
-      this.props.majorCharWidth = measureCharMajor.clientWidth;
+    // recalculate absolute position (before redrawing groups)
+    this.props.top = this.body.domProps.top.height + this.body.domProps.border.top;
+    this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
 
-      this.dom.frame.removeChild(measureCharMajor);
-    }
+    // update class name
+    frame.className = 'itemset' + (editable ? ' editable' : '');
 
-    if (!('titleCharHeight' in this.props)) {
-      var textTitle = document.createTextNode('0');
-      var measureCharTitle = document.createElement('div');
-      measureCharTitle.className = 'yAxis title measure';
-      measureCharTitle.appendChild(textTitle);
-      this.dom.frame.appendChild(measureCharTitle);
-
-      this.props.titleCharHeight = measureCharTitle.clientHeight;
-      this.props.titleCharWidth = measureCharTitle.clientWidth;
+    // reorder the groups (if needed)
+    resized = this._orderGroups() || resized;
 
-      this.dom.frame.removeChild(measureCharTitle);
-    }
-  };
+    // check whether zoomed (in that case we need to re-stack everything)
+    // TODO: would be nicer to get this as a trigger from Range
+    var visibleInterval = range.end - range.start;
+    var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth);
+    if (zoomed) this.stackDirty = true;
+    this.lastVisibleInterval = visibleInterval;
+    this.props.lastWidth = this.props.width;
 
-  /**
-   * Snap a date to a rounded value.
-   * The snap intervals are dependent on the current scale and step.
-   * @param {Date} date   the date to be snapped.
-   * @return {Date} snappedDate
-   */
-  DataAxis.prototype.snap = function(date) {
-    return this.step.snap(date);
-  };
+    var restack = this.stackDirty;
+    var firstGroup = this._firstGroup();
+    var firstMargin = {
+      item: margin.item,
+      axis: margin.axis
+    };
+    var nonFirstMargin = {
+      item: margin.item,
+      axis: margin.item.vertical / 2
+    };
+    var height = 0;
+    var minHeight = margin.axis + margin.item.vertical;
 
-  module.exports = DataAxis;
+    // redraw the background group
+    this.groups[BACKGROUND].redraw(range, nonFirstMargin, restack);
 
+    // redraw all regular groups
+    util.forEach(this.groups, function (group) {
+      var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
+      var groupResized = group.redraw(range, groupMargin, restack);
+      resized = groupResized || resized;
+      height += group.height;
+    });
+    height = Math.max(height, minHeight);
+    this.stackDirty = false;
 
-/***/ },
-/* 29 */
-/***/ function(module, exports, __webpack_require__) {
+    // update frame height
+    frame.style.height  = asSize(height);
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Line = __webpack_require__(49);
-  var Bar = __webpack_require__(50);
-  var Points = __webpack_require__(51);
+    // calculate actual size
+    this.props.width = frame.offsetWidth;
+    this.props.height = height;
 
-  /**
-   * /**
-   * @param {object} group            | the object of the group from the dataset
-   * @param {string} groupId          | ID of the group
-   * @param {object} options          | the default options
-   * @param {array} groupsUsingDefaultStyles  | this array has one entree.
-   *                                            It is passed as an array so it is passed by reference.
-   *                                            It enumerates through the default styles
-   * @constructor
-   */
-  function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
-    this.id = groupId;
-    var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
-    this.options = util.selectiveBridgeObject(fields,options);
-    this.usingDefaultStyle = group.className === undefined;
-    this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
-    this.zeroPosition = 0;
-    this.update(group);
-    if (this.usingDefaultStyle == true) {
-      this.groupsUsingDefaultStyles[0] += 1;
-    }
-    this.itemsData = [];
-    this.visible = group.visible === undefined ? true : group.visible;
-  }
+    // reposition axis
+    this.dom.axis.style.top = asSize((orientation == 'top') ?
+        (this.body.domProps.top.height + this.body.domProps.border.top) :
+        (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
+    this.dom.axis.style.left = '0';
 
+    // check if this component is resized
+    resized = this._isResized() || resized;
 
-  /**
-   * this loads a reference to all items in this group into this group.
-   * @param {array} items
-   */
-  GraphGroup.prototype.setItems = function(items) {
-    if (items != null) {
-      this.itemsData = items;
-      if (this.options.sort == true) {
-        this.itemsData.sort(function (a,b) {return a.x - b.x;})
-      }
-    }
-    else {
-      this.itemsData = [];
-    }
+    return resized;
   };
 
-
   /**
-   * this is used for plotting barcharts, this way, we only have to calculate it once.
-   * @param pos
+   * Get the first group, aligned with the axis
+   * @return {Group | null} firstGroup
+   * @private
    */
-  GraphGroup.prototype.setZeroPosition = function(pos) {
-    this.zeroPosition = pos;
-  };
+  ItemSet.prototype._firstGroup = function() {
+    var firstGroupIndex = (this.options.orientation == 'top') ? 0 : (this.groupIds.length - 1);
+    var firstGroupId = this.groupIds[firstGroupIndex];
+    var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
 
+    return firstGroup || null;
+  };
 
   /**
-   * set the options of the graph group over the default options.
-   * @param options
+   * Create or delete the group holding all ungrouped items. This group is used when
+   * there are no groups specified.
+   * @protected
    */
-  GraphGroup.prototype.setOptions = function(options) {
-    if (options !== undefined) {
-      var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
-      util.selectiveDeepExtend(fields, this.options, options);
+  ItemSet.prototype._updateUngrouped = function() {
+    var ungrouped = this.groups[UNGROUPED];
+    var background = this.groups[BACKGROUND];
+    var item, itemId;
 
-      util.mergeOptions(this.options, options,'catmullRom');
-      util.mergeOptions(this.options, options,'drawPoints');
-      util.mergeOptions(this.options, options,'shaded');
+    if (this.groupsData) {
+      // remove the group holding all ungrouped items
+      if (ungrouped) {
+        ungrouped.hide();
+        delete this.groups[UNGROUPED];
 
-      if (options.catmullRom) {
-        if (typeof options.catmullRom == 'object') {
-          if (options.catmullRom.parametrization) {
-            if (options.catmullRom.parametrization == 'uniform') {
-              this.options.catmullRom.alpha = 0;
-            }
-            else if (options.catmullRom.parametrization == 'chordal') {
-              this.options.catmullRom.alpha = 1.0;
-            }
-            else {
-              this.options.catmullRom.parametrization = 'centripetal';
-              this.options.catmullRom.alpha = 0.5;
-            }
+        for (itemId in this.items) {
+          if (this.items.hasOwnProperty(itemId)) {
+            item = this.items[itemId];
+            item.parent && item.parent.remove(item);
+            var groupId = this._getGroupId(item.data);
+            var group = this.groups[groupId];
+            group && group.add(item) || item.hide();
           }
         }
       }
     }
+    else {
+      // create a group holding all (unfiltered) items
+      if (!ungrouped) {
+        var id = null;
+        var data = null;
+        ungrouped = new Group(id, data, this);
+        this.groups[UNGROUPED] = ungrouped;
 
-    if (this.options.style == 'line') {
-      this.type = new Line(this.id, this.options);
-    }
-    else if (this.options.style == 'bar') {
-      this.type = new Bar(this.id, this.options);
-    }
-    else if (this.options.style == 'points') {
-      this.type = new Points(this.id, this.options);
+        for (itemId in this.items) {
+          if (this.items.hasOwnProperty(itemId)) {
+            item = this.items[itemId];
+            ungrouped.add(item);
+          }
+        }
+
+        ungrouped.show();
+      }
     }
   };
 
-
   /**
-   * this updates the current group class with the latest group dataset entree, used in _updateGroup in linegraph
-   * @param group
+   * Get the element for the labelset
+   * @return {HTMLElement} labelSet
    */
-  GraphGroup.prototype.update = function(group) {
-    this.group = group;
-    this.content = group.content || 'graph';
-    this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
-    this.visible = group.visible === undefined ? true : group.visible;
-    this.style = group.style;
-    this.setOptions(group.options);
+  ItemSet.prototype.getLabelSet = function() {
+    return this.dom.labelSet;
   };
 
-
   /**
-   * draw the icon for the legend.
-   *
-   * @param x
-   * @param y
-   * @param JSONcontainer
-   * @param SVGcontainer
-   * @param iconWidth
-   * @param iconHeight
+   * Set items
+   * @param {vis.DataSet | null} items
    */
-  GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
-    var fillHeight = iconHeight * 0.5;
-    var path, fillPath;
-
-    var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
-    outline.setAttributeNS(null, "x", x);
-    outline.setAttributeNS(null, "y", y - fillHeight);
-    outline.setAttributeNS(null, "width", iconWidth);
-    outline.setAttributeNS(null, "height", 2*fillHeight);
-    outline.setAttributeNS(null, "class", "outline");
-
-    if (this.options.style == 'line') {
-      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-      path.setAttributeNS(null, "class", this.className);
-      if(this.style !== undefined) {
-        path.setAttributeNS(null, "style", this.style);
-      }
-
-      path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
-      if (this.options.shaded.enabled == true) {
-        fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-        if (this.options.shaded.orientation == 'top') {
-          fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
-            "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
-        }
-        else {
-          fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
-            "L"+x+"," + (y + fillHeight) + " " +
-            "L"+ (x + iconWidth) + "," + (y + fillHeight) +
-            "L"+ (x + iconWidth) + ","+y);
-        }
-        fillPath.setAttributeNS(null, "class", this.className + " iconFill");
-      }
+  ItemSet.prototype.setItems = function(items) {
+    var me = this,
+        ids,
+        oldItemsData = this.itemsData;
 
-      if (this.options.drawPoints.enabled == true) {
-        DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
-      }
+    // replace the dataset
+    if (!items) {
+      this.itemsData = null;
+    }
+    else if (items instanceof DataSet || items instanceof DataView) {
+      this.itemsData = items;
     }
     else {
-      var barWidth = Math.round(0.3 * iconWidth);
-      var bar1Height = Math.round(0.4 * iconHeight);
-      var bar2Height = Math.round(0.75 * iconHeight);
-
-      var offset = Math.round((iconWidth - (2 * barWidth))/3);
-
-      DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
-      DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+      throw new TypeError('Data must be an instance of DataSet or DataView');
     }
-  };
-
-
-  /**
-   * return the legend entree for this group.
-   *
-   * @param iconWidth
-   * @param iconHeight
-   * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
-   */
-  GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
-    var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
-    this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
-    return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
-  }
-
-  GraphGroup.prototype.getYRange = function(groupData) {
-    return this.type.getYRange(groupData);
-  }
-
-  GraphGroup.prototype.draw = function(dataset, group, framework) {
-    this.type.draw(dataset, group, framework);
-  }
 
+    if (oldItemsData) {
+      // unsubscribe from old dataset
+      util.forEach(this.itemListeners, function (callback, event) {
+        oldItemsData.off(event, callback);
+      });
 
-  module.exports = GraphGroup;
+      // remove all drawn items
+      ids = oldItemsData.getIds();
+      this._onRemove(ids);
+    }
 
+    if (this.itemsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.itemListeners, function (callback, event) {
+        me.itemsData.on(event, callback, id);
+      });
 
-/***/ },
-/* 30 */
-/***/ function(module, exports, __webpack_require__) {
+      // add all new items
+      ids = this.itemsData.getIds();
+      this._onAdd(ids);
 
-  var util = __webpack_require__(1);
-  var stack = __webpack_require__(18);
-  var RangeItem = __webpack_require__(24);
+      // update the group holding all ungrouped items
+      this._updateUngrouped();
+    }
+  };
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * Get the current items
+   * @returns {vis.DataSet | null}
    */
-  function Group (groupId, data, itemSet) {
-    this.groupId = groupId;
-    this.subgroups = {};
-    this.subgroupIndex = 0;
-    this.subgroupOrderer = data && data.subgroupOrder;
-    this.itemSet = itemSet;
-
-    this.dom = {};
-    this.props = {
-      label: {
-        width: 0,
-        height: 0
-      }
-    };
-    this.className = null;
-
-    this.items = {};        // items filtered by groupId of this group
-    this.visibleItems = []; // items currently visible in window
-    this.orderedItems = {
-      byStart: [],
-      byEnd: []
-    };
-    this.checkRangedItems = false; // needed to refresh the ranged items if the window is programatically changed with NO overlap.
-    var me = this;
-    this.itemSet.body.emitter.on("checkRangedItems", function () {
-      me.checkRangedItems = true;
-    })
-
-    this._create();
-
-    this.setData(data);
-  }
+  ItemSet.prototype.getItems = function() {
+    return this.itemsData;
+  };
 
   /**
-   * Create DOM elements for the group
-   * @private
+   * Set groups
+   * @param {vis.DataSet} groups
    */
-  Group.prototype._create = function() {
-    var label = document.createElement('div');
-    label.className = 'vlabel';
-    this.dom.label = label;
-
-    var inner = document.createElement('div');
-    inner.className = 'inner';
-    label.appendChild(inner);
-    this.dom.inner = inner;
-
-    var foreground = document.createElement('div');
-    foreground.className = 'group';
-    foreground['timeline-group'] = this;
-    this.dom.foreground = foreground;
-
-    this.dom.background = document.createElement('div');
-    this.dom.background.className = 'group';
+  ItemSet.prototype.setGroups = function(groups) {
+    var me = this,
+        ids;
 
-    this.dom.axis = document.createElement('div');
-    this.dom.axis.className = 'group';
+    // unsubscribe from current dataset
+    if (this.groupsData) {
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.unsubscribe(event, callback);
+      });
 
-    // create a hidden marker to detect when the Timelines container is attached
-    // to the DOM, or the style of a parent of the Timeline is changed from
-    // display:none is changed to visible.
-    this.dom.marker = document.createElement('div');
-    this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
-    this.dom.marker.innerHTML = '?';
-    this.dom.background.appendChild(this.dom.marker);
-  };
+      // remove all drawn groups
+      ids = this.groupsData.getIds();
+      this.groupsData = null;
+      this._onRemoveGroups(ids); // note: this will cause a redraw
+    }
 
-  /**
-   * Set the group data for this group
-   * @param {Object} data   Group data, can contain properties content and className
-   */
-  Group.prototype.setData = function(data) {
-    // update contents
-    var content = data && data.content;
-    if (content instanceof Element) {
-      this.dom.inner.appendChild(content);
+    // replace the dataset
+    if (!groups) {
+      this.groupsData = null;
     }
-    else if (content !== undefined && content !== null) {
-      this.dom.inner.innerHTML = content;
+    else if (groups instanceof DataSet || groups instanceof DataView) {
+      this.groupsData = groups;
     }
     else {
-      this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
+      throw new TypeError('Data must be an instance of DataSet or DataView');
     }
 
-    // update title
-    this.dom.label.title = data && data.title || '';
+    if (this.groupsData) {
+      // subscribe to new dataset
+      var id = this.id;
+      util.forEach(this.groupListeners, function (callback, event) {
+        me.groupsData.on(event, callback, id);
+      });
 
-    if (!this.dom.inner.firstChild) {
-      util.addClassName(this.dom.inner, 'hidden');
-    }
-    else {
-      util.removeClassName(this.dom.inner, 'hidden');
+      // draw all ms
+      ids = this.groupsData.getIds();
+      this._onAddGroups(ids);
     }
 
-    // update className
-    var className = data && data.className || null;
-    if (className != this.className) {
-      if (this.className) {
-        util.removeClassName(this.dom.label, this.className);
-        util.removeClassName(this.dom.foreground, this.className);
-        util.removeClassName(this.dom.background, this.className);
-        util.removeClassName(this.dom.axis, this.className);
-      }
-      util.addClassName(this.dom.label, className);
-      util.addClassName(this.dom.foreground, className);
-      util.addClassName(this.dom.background, className);
-      util.addClassName(this.dom.axis, className);
-      this.className = className;
-    }
+    // update the group holding all ungrouped items
+    this._updateUngrouped();
 
-    // update style
-    if (this.style) {
-      util.removeCssText(this.dom.label, this.style);
-      this.style = null;
-    }
-    if (data && data.style) {
-      util.addCssText(this.dom.label, data.style);
-      this.style = data.style;
-    }
+    // update the order of all items in each group
+    this._order();
+
+    this.body.emitter.emit('change', {queue: true});
   };
 
   /**
-   * Get the width of the group label
-   * @return {number} width
+   * Get the current groups
+   * @returns {vis.DataSet | null} groups
    */
-  Group.prototype.getLabelWidth = function() {
-    return this.props.label.width;
+  ItemSet.prototype.getGroups = function() {
+    return this.groupsData;
   };
 
-
   /**
-   * Repaint this group
-   * @param {{start: number, end: number}} range
-   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
-   * @param {boolean} [restack=false]  Force restacking of all items
-   * @return {boolean} Returns true if the group is resized
+   * Remove an item by its id
+   * @param {String | Number} id
    */
-  Group.prototype.redraw = function(range, margin, restack) {
-    var resized = false;
-
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
-
-    // force recalculation of the height of the items when the marker height changed
-    // (due to the Timeline being attached to the DOM or changed from display:none to visible)
-    var markerHeight = this.dom.marker.clientHeight;
-    if (markerHeight != this.lastMarkerHeight) {
-      this.lastMarkerHeight = markerHeight;
+  ItemSet.prototype.removeItem = function(id) {
+    var item = this.itemsData.get(id),
+        dataset = this.itemsData.getDataSet();
 
-      util.forEach(this.items, function (item) {
-        item.dirty = true;
-        if (item.displayed) item.redraw();
+    if (item) {
+      // confirm deletion
+      this.options.onRemove(item, function (item) {
+        if (item) {
+          // remove by id here, it is possible that an item has no id defined
+          // itself, so better not delete by the item itself
+          dataset.remove(id);
+        }
       });
-
-      restack = true;
     }
+  };
 
-    // reposition visible items vertically
-    if (this.itemSet.options.stack) { // TODO: ugly way to access options...
-      stack.stack(this.visibleItems, margin, restack);
+  /**
+   * Get the time of an item based on it's data and options.type
+   * @param {Object} itemData
+   * @returns {string} Returns the type
+   * @private
+   */
+  ItemSet.prototype._getType = function (itemData) {
+    return itemData.type || this.options.type || (itemData.end ? 'range' : 'box');
+  };
+
+
+  /**
+   * Get the group id for an item
+   * @param {Object} itemData
+   * @returns {string} Returns the groupId
+   * @private
+   */
+  ItemSet.prototype._getGroupId = function (itemData) {
+    var type = this._getType(itemData);
+    if (type == 'background' && itemData.group == undefined) {
+     return BACKGROUND;
     }
-    else { // no stacking
-      stack.nostack(this.visibleItems, margin, this.subgroups);
+    else {
+      return this.groupsData ? itemData.group : UNGROUPED;
     }
+  };
 
-    // recalculate the height of the group
-    var height = this._calculateHeight(margin);
+  /**
+   * Handle updated items
+   * @param {Number[]} ids
+   * @protected
+   */
+  ItemSet.prototype._onUpdate = function(ids) {
+    var me = this;
 
-    // calculate actual size and position
-    var foreground = this.dom.foreground;
-    this.top = foreground.offsetTop;
-    this.left = foreground.offsetLeft;
-    this.width = foreground.offsetWidth;
-    resized = util.updateProperty(this, 'height', height) || resized;
+    ids.forEach(function (id) {
+      var itemData = me.itemsData.get(id, me.itemOptions);
+      var item = me.items[id];
+      var type = me._getType(itemData);
 
-    // recalculate size of label
-    resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
-    resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
+      var constructor = ItemSet.types[type];
 
-    // apply new height
-    this.dom.background.style.height  = height + 'px';
-    this.dom.foreground.style.height  = height + 'px';
-    this.dom.label.style.height = height + 'px';
+      if (item) {
+        // update item
+        if (!constructor || !(item instanceof constructor)) {
+          // item type has changed, delete the item and recreate it
+          me._removeItem(item);
+          item = null;
+        }
+        else {
+          me._updateItem(item, itemData);
+        }
+      }
 
-    // update vertical position of items after they are re-stacked and the height of the group is calculated
-    for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
-      var item = this.visibleItems[i];
-      item.repositionY(margin);
-    }
+      if (!item) {
+        // create item
+        if (constructor) {
+          item = new constructor(itemData, me.conversion, me.options);
+          item.id = id; // TODO: not so nice setting id afterwards
+          me._addItem(item);
+        }
+        else if (type == 'rangeoverflow') {
+          // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
+          throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
+              '.vis.timeline .item.range .content {overflow: visible;}');
+        }
+        else {
+          throw new TypeError('Unknown item type "' + type + '"');
+        }
+      }
+    });
 
-    return resized;
+    this._order();
+    this.stackDirty = true; // force re-stacking of all items next redraw
+    this.body.emitter.emit('change', {queue: true});
   };
 
   /**
-   * recalculate the height of the group
-   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
-   * @returns {number} Returns the height
-   * @private
+   * Handle added items
+   * @param {Number[]} ids
+   * @protected
    */
-  Group.prototype._calculateHeight = function (margin) {
-    // recalculate the height of the group
-    var height;
-    var visibleItems = this.visibleItems;
-    //var visibleSubgroups = [];
-    //this.visibleSubgroups = 0;
-    this.resetSubgroups();
+  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
+
+  /**
+   * Handle removed items
+   * @param {Number[]} ids
+   * @protected
+   */
+  ItemSet.prototype._onRemove = function(ids) {
+    var count = 0;
     var me = this;
-    if (visibleItems.length) {
-      var min = visibleItems[0].top;
-      var max = visibleItems[0].top + visibleItems[0].height;
-      util.forEach(visibleItems, function (item) {
-        min = Math.min(min, item.top);
-        max = Math.max(max, (item.top + item.height));
-        if (item.data.subgroup !== undefined) {
-          me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height,item.height);
-          me.subgroups[item.data.subgroup].visible = true;
-          //if (visibleSubgroups.indexOf(item.data.subgroup) == -1){
-          //  visibleSubgroups.push(item.data.subgroup);
-          //  me.visibleSubgroups += 1;
-          //}
-        }
-      });
-      if (min > margin.axis) {
-        // there is an empty gap between the lowest item and the axis
-        var offset = min - margin.axis;
-        max -= offset;
-        util.forEach(visibleItems, function (item) {
-          item.top -= offset;
-        });
+    ids.forEach(function (id) {
+      var item = me.items[id];
+      if (item) {
+        count++;
+        me._removeItem(item);
       }
-      height = max + margin.item.vertical / 2;
-    }
-    else {
-      height = margin.axis + margin.item.vertical;
+    });
+
+    if (count) {
+      // update order
+      this._order();
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change', {queue: true});
     }
-    height = Math.max(height, this.props.label.height);
+  };
 
-    return height;
+  /**
+   * Update the order of item in all groups
+   * @private
+   */
+  ItemSet.prototype._order = function() {
+    // reorder the items in all groups
+    // TODO: optimization: only reorder groups affected by the changed items
+    util.forEach(this.groups, function (group) {
+      group.order();
+    });
   };
 
   /**
-   * Show this group: attach to the DOM
+   * Handle updated groups
+   * @param {Number[]} ids
+   * @private
    */
-  Group.prototype.show = function() {
-    if (!this.dom.label.parentNode) {
-      this.itemSet.dom.labelSet.appendChild(this.dom.label);
-    }
+  ItemSet.prototype._onUpdateGroups = function(ids) {
+    this._onAddGroups(ids);
+  };
 
-    if (!this.dom.foreground.parentNode) {
-      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
-    }
+  /**
+   * Handle changed groups (added or updated)
+   * @param {Number[]} ids
+   * @private
+   */
+  ItemSet.prototype._onAddGroups = function(ids) {
+    var me = this;
 
-    if (!this.dom.background.parentNode) {
-      this.itemSet.dom.background.appendChild(this.dom.background);
-    }
+    ids.forEach(function (id) {
+      var groupData = me.groupsData.get(id);
+      var group = me.groups[id];
 
-    if (!this.dom.axis.parentNode) {
-      this.itemSet.dom.axis.appendChild(this.dom.axis);
-    }
+      if (!group) {
+        // check for reserved ids
+        if (id == UNGROUPED || id == BACKGROUND) {
+          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
+        }
+
+        var groupOptions = Object.create(me.options);
+        util.extend(groupOptions, {
+          height: null
+        });
+
+        group = new Group(id, groupData, me);
+        me.groups[id] = group;
+
+        // add items with this groupId to the new group
+        for (var itemId in me.items) {
+          if (me.items.hasOwnProperty(itemId)) {
+            var item = me.items[itemId];
+            if (item.data.group == id) {
+              group.add(item);
+            }
+          }
+        }
+
+        group.order();
+        group.show();
+      }
+      else {
+        // update group
+        group.setData(groupData);
+      }
+    });
+
+    this.body.emitter.emit('change', {queue: true});
   };
 
   /**
-   * Hide this group: remove from the DOM
+   * Handle removed groups
+   * @param {Number[]} ids
+   * @private
    */
-  Group.prototype.hide = function() {
-    var label = this.dom.label;
-    if (label.parentNode) {
-      label.parentNode.removeChild(label);
-    }
+  ItemSet.prototype._onRemoveGroups = function(ids) {
+    var groups = this.groups;
+    ids.forEach(function (id) {
+      var group = groups[id];
 
-    var foreground = this.dom.foreground;
-    if (foreground.parentNode) {
-      foreground.parentNode.removeChild(foreground);
-    }
+      if (group) {
+        group.hide();
+        delete groups[id];
+      }
+    });
 
-    var background = this.dom.background;
-    if (background.parentNode) {
-      background.parentNode.removeChild(background);
-    }
+    this.markDirty();
 
-    var axis = this.dom.axis;
-    if (axis.parentNode) {
-      axis.parentNode.removeChild(axis);
-    }
+    this.body.emitter.emit('change', {queue: true});
   };
 
   /**
-   * Add an item to the group
-   * @param {Item} item
+   * Reorder the groups if needed
+   * @return {boolean} changed
+   * @private
    */
-  Group.prototype.add = function(item) {
-    this.items[item.id] = item;
-    item.setParent(this);
+  ItemSet.prototype._orderGroups = function () {
+    if (this.groupsData) {
+      // reorder the groups
+      var groupIds = this.groupsData.getIds({
+        order: this.options.groupOrder
+      });
 
-    // add to
-    if (item.data.subgroup !== undefined) {
-      if (this.subgroups[item.data.subgroup] === undefined) {
-        this.subgroups[item.data.subgroup] = {height:0, visible: false, index:this.subgroupIndex, items: []};
-        this.subgroupIndex++;
-      }
-      this.subgroups[item.data.subgroup].items.push(item);
-    }
-    this.orderSubgroups();
+      var changed = !util.equalArray(groupIds, this.groupIds);
+      if (changed) {
+        // hide all groups, removes them from the DOM
+        var groups = this.groups;
+        groupIds.forEach(function (groupId) {
+          groups[groupId].hide();
+        });
 
-    if (this.visibleItems.indexOf(item) == -1) {
-      var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
-      this._checkIfVisible(item, this.visibleItems, range);
-    }
-  };
+        // show the groups again, attach them to the DOM in correct order
+        groupIds.forEach(function (groupId) {
+          groups[groupId].show();
+        });
 
-  Group.prototype.orderSubgroups = function() {
-    if (this.subgroupOrderer !== undefined) {
-      var sortArray = [];
-      if (typeof this.subgroupOrderer == 'string') {
-        for (var subgroup in this.subgroups) {
-          sortArray.push({subgroup: subgroup, sortField: this.subgroups[subgroup].items[0].data[this.subgroupOrderer]})
-        }
-        sortArray.sort(function (a, b) {
-          return a.sortField - b.sortField;
-        })
-      }
-      else if (typeof this.subgroupOrderer == 'function') {
-        for (var subgroup in this.subgroups) {
-          sortArray.push(this.subgroups[subgroup].items[0].data);
-        }
-        sortArray.sort(this.subgroupOrderer);
+        this.groupIds = groupIds;
       }
 
-      if (sortArray.length > 0) {
-        for (var i = 0; i < sortArray.length; i++) {
-          this.subgroups[sortArray[i].subgroup].index = i;
-        }
-      }
+      return changed;
+    }
+    else {
+      return false;
     }
   };
 
-  Group.prototype.resetSubgroups = function() {
-    for (var subgroup in this.subgroups) {
-      if (this.subgroups.hasOwnProperty(subgroup)) {
-        this.subgroups[subgroup].visible = false;
-      }
-    }
+  /**
+   * Add a new item
+   * @param {Item} item
+   * @private
+   */
+  ItemSet.prototype._addItem = function(item) {
+    this.items[item.id] = item;
+
+    // add to group
+    var groupId = this._getGroupId(item.data);
+    var group = this.groups[groupId];
+    if (group) group.add(item);
   };
 
   /**
-   * Remove an item from the group
+   * Update an existing item
    * @param {Item} item
+   * @param {Object} itemData
+   * @private
    */
-  Group.prototype.remove = function(item) {
-    delete this.items[item.id];
-    item.setParent(null);
+  ItemSet.prototype._updateItem = function(item, itemData) {
+    var oldGroupId = item.data.group;
 
-    // remove from visible items
-    var index = this.visibleItems.indexOf(item);
-    if (index != -1) this.visibleItems.splice(index, 1);
+    // update the items data (will redraw the item when displayed)
+    item.setData(itemData);
 
-    // TODO: also remove from ordered items?
-  };
+    // update group
+    if (oldGroupId != item.data.group) {
+      var oldGroup = this.groups[oldGroupId];
+      if (oldGroup) oldGroup.remove(item);
 
+      var groupId = this._getGroupId(item.data);
+      var group = this.groups[groupId];
+      if (group) group.add(item);
+    }
+  };
 
   /**
-   * Remove an item from the corresponding DataSet
+   * Delete an item from the ItemSet: remove it from the DOM, from the map
+   * with items, and from the map with visible items, and from the selection
    * @param {Item} item
+   * @private
    */
-  Group.prototype.removeFromDataSet = function(item) {
-    this.itemSet.removeItem(item.id);
-  };
+  ItemSet.prototype._removeItem = function(item) {
+    // remove from DOM
+    item.hide();
+
+    // remove from items
+    delete this.items[item.id];
 
+    // remove from selection
+    var index = this.selection.indexOf(item.id);
+    if (index != -1) this.selection.splice(index, 1);
+
+    // remove from group
+    item.parent && item.parent.remove(item);
+  };
 
   /**
-   * Reorder the items
+   * Create an array containing all items being a range (having an end date)
+   * @param array
+   * @returns {Array}
+   * @private
    */
-  Group.prototype.order = function() {
-    var array = util.toArray(this.items);
-    var startArray = [];
+  ItemSet.prototype._constructByEndArray = function(array) {
     var endArray = [];
 
     for (var i = 0; i < array.length; i++) {
-      if (array[i].data.end !== undefined) {
+      if (array[i] instanceof RangeItem) {
         endArray.push(array[i]);
       }
-      startArray.push(array[i]);
     }
-    this.orderedItems = {
-      byStart: startArray,
-      byEnd: endArray
-    };
-
-    stack.orderByStart(this.orderedItems.byStart);
-    stack.orderByEnd(this.orderedItems.byEnd);
+    return endArray;
   };
 
-
   /**
-   * Update the visible items
-   * @param {{byStart: Item[], byEnd: Item[]}} orderedItems   All items ordered by start date and by end date
-   * @param {Item[]} visibleItems                             The previously visible items.
-   * @param {{start: number, end: number}} range              Visible range
-   * @return {Item[]} visibleItems                            The new visible items.
+   * Register the clicked item on touch, before dragStart is initiated.
+   *
+   * dragStart is initiated from a mousemove event, which can have left the item
+   * already resulting in an item == null
+   *
+   * @param {Event} event
    * @private
    */
-  Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, range) {
-    var visibleItems = [];
-    var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
-    var interval = (range.end - range.start) / 4;
-    var lowerBound = range.start - interval;
-    var upperBound = range.end + interval;
-    var item, i;
+  ItemSet.prototype._onTouch = function (event) {
+    // store the touched item, used in _onDragStart
+    this.touchParams.item = ItemSet.itemFromTarget(event);
+  };
 
-    // this function is used to do the binary search.
-    var searchFunction = function (value) {
-      if      (value < lowerBound)  {return -1;}
-      else if (value <= upperBound) {return  0;}
-      else                          {return  1;}
+  /**
+   * Start dragging the selected events
+   * @param {Event} event
+   * @private
+   */
+  ItemSet.prototype._onDragStart = function (event) {
+    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
+      return;
     }
 
-    // first check if the items that were in view previously are still in view.
-    // IMPORTANT: this handles the case for the items with startdate before the window and enddate after the window!
-    // also cleans up invisible items.
-    if (oldVisibleItems.length > 0) {
-      for (i = 0; i < oldVisibleItems.length; i++) {
-        this._checkIfVisibleWithReference(oldVisibleItems[i], visibleItems, visibleItemsLookup, range);
-      }
-    }
+    var item = this.touchParams.item || null;
+    var me = this;
+    var props;
 
-    // we do a binary search for the items that have only start values.
-    var initialPosByStart = util.binarySearchCustom(orderedItems.byStart, searchFunction, 'data','start');
+    if (item && item.selected) {
+      var dragLeftItem = event.target.dragLeftItem;
+      var dragRightItem = event.target.dragRightItem;
 
-    // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the start values.
-    this._traceVisible(initialPosByStart, orderedItems.byStart, visibleItems, visibleItemsLookup, function (item) {
-      return (item.data.start < lowerBound || item.data.start > upperBound);
-    });
+      if (dragLeftItem) {
+        props = {
+          item: dragLeftItem,
+          initialX: event.gesture.center.clientX
+        };
 
-    // if the window has changed programmatically without overlapping the old window, the ranged items with start < lowerBound and end > upperbound are not shown.
-    // We therefore have to brute force check all items in the byEnd list
-    if (this.checkRangedItems == true) {
-      this.checkRangedItems = false;
-      for (i = 0; i < orderedItems.byEnd.length; i++) {
-        this._checkIfVisibleWithReference(orderedItems.byEnd[i], visibleItems, visibleItemsLookup, range);
-      }
-    }
-    else {
-      // we do a binary search for the items that have defined end times.
-      var initialPosByEnd = util.binarySearchCustom(orderedItems.byEnd, searchFunction, 'data','end');
+        if (me.options.editable.updateTime) {
+          props.start = item.data.start.valueOf();
+        }
+        if (me.options.editable.updateGroup) {
+          if ('group' in item.data) props.group = item.data.group;
+        }
 
-      // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the end values.
-      this._traceVisible(initialPosByEnd, orderedItems.byEnd, visibleItems, visibleItemsLookup, function (item) {
-        return (item.data.end < lowerBound || item.data.end > upperBound);
-      });
-    }
+        this.touchParams.itemProps = [props];
+      }
+      else if (dragRightItem) {
+        props = {
+          item: dragRightItem,
+          initialX: event.gesture.center.clientX
+        };
 
+        if (me.options.editable.updateTime) {
+          props.end = item.data.end.valueOf();
+        }
+        if (me.options.editable.updateGroup) {
+          if ('group' in item.data) props.group = item.data.group;
+        }
 
-    // finally, we reposition all the visible items.
-    for (i = 0; i < visibleItems.length; i++) {
-      item = visibleItems[i];
-      if (!item.displayed) item.show();
-      // reposition item horizontally
-      item.repositionX();
-    }
+        this.touchParams.itemProps = [props];
+      }
+      else {
+        this.touchParams.itemProps = this.getSelection().map(function (id) {
+          var item = me.items[id];
+          var props = {
+            item: item,
+            initialX: event.gesture.center.clientX
+          };
 
-    // debug
-    //console.log("new line")
-    //if (this.groupId == null) {
-    //  for (i = 0; i < orderedItems.byStart.length; i++) {
-    //    item = orderedItems.byStart[i].data;
-    //    console.log('start',i,initialPosByStart, item.start.valueOf(), item.content, item.start >= lowerBound && item.start <= upperBound,i == initialPosByStart ? "<------------------- HEREEEE" : "")
-    //  }
-    //  for (i = 0; i < orderedItems.byEnd.length; i++) {
-    //    item = orderedItems.byEnd[i].data;
-    //    console.log('rangeEnd',i,initialPosByEnd, item.end.valueOf(), item.content, item.end >= range.start && item.end <= range.end,i == initialPosByEnd ? "<------------------- HEREEEE" : "")
-    //  }
-    //}
+          if (me.options.editable.updateTime) {
+            if ('start' in item.data) props.start = item.data.start.valueOf();
+            if ('end' in item.data)   props.end = item.data.end.valueOf();
+          }
+          if (me.options.editable.updateGroup) {
+            if ('group' in item.data) props.group = item.data.group;
+          }
 
-    return visibleItems;
+          return props;
+        });
+      }
+
+      event.stopPropagation();
+    }
   };
 
-  Group.prototype._traceVisible = function (initialPos, items, visibleItems, visibleItemsLookup, breakCondition) {
-    var item;
-    var i;
+  /**
+   * Drag selected items
+   * @param {Event} event
+   * @private
+   */
+  ItemSet.prototype._onDrag = function (event) {
+    event.preventDefault()
 
-    if (initialPos != -1) {
-      for (i = initialPos; i >= 0; i--) {
-        item = items[i];
-        if (breakCondition(item)) {
-          break;
+    if (this.touchParams.itemProps) {
+      var me = this;
+      var snap = this.body.util.snap || null;
+      var xOffset = this.body.dom.root.offsetLeft + this.body.domProps.left.width;
+
+      // move
+      this.touchParams.itemProps.forEach(function (props) {
+        var newProps = {};
+        var current = me.body.util.toTime(event.gesture.center.clientX - xOffset);
+        var initial = me.body.util.toTime(props.initialX - xOffset);
+        var offset = current - initial;
+
+        if ('start' in props) {
+          var start = new Date(props.start + offset);
+          newProps.start = snap ? snap(start) : start;
         }
-        else {
-          if (visibleItemsLookup[item.id] === undefined) {
-            visibleItemsLookup[item.id] = true;
-            visibleItems.push(item);
-          }
+
+        if ('end' in props) {
+          var end = new Date(props.end + offset);
+          newProps.end = snap ? snap(end) : end;
         }
-      }
 
-      for (i = initialPos + 1; i < items.length; i++) {
-        item = items[i];
-        if (breakCondition(item)) {
-          break;
+        if ('group' in props) {
+          // drag from one group to another
+          var group = ItemSet.groupFromTarget(event);
+          newProps.group = group && group.groupId;
         }
-        else {
-          if (visibleItemsLookup[item.id] === undefined) {
-            visibleItemsLookup[item.id] = true;
-            visibleItems.push(item);
+
+        // confirm moving the item
+        var itemData = util.extend({}, props.item.data, newProps);
+        me.options.onMoving(itemData, function (itemData) {
+          if (itemData) {
+            me._updateItemProps(props.item, itemData);
           }
-        }
-      }
-    }
-  }
+        });
+      });
+
+      this.stackDirty = true; // force re-stacking of all items next redraw
+      this.body.emitter.emit('change');
 
+      event.stopPropagation();
+    }
+  };
 
   /**
-   * this function is very similar to the _checkIfInvisible() but it does not
-   * return booleans, hides the item if it should not be seen and always adds to
-   * the visibleItems.
-   * this one is for brute forcing and hiding.
-   *
+   * Update an items properties
    * @param {Item} item
-   * @param {Array} visibleItems
-   * @param {{start:number, end:number}} range
+   * @param {Object} props  Can contain properties start, end, and group.
    * @private
    */
-  Group.prototype._checkIfVisible = function(item, visibleItems, range) {
-      if (item.isVisible(range)) {
-        if (!item.displayed) item.show();
-        // reposition item horizontally
-        item.repositionX();
-        visibleItems.push(item);
-      }
-      else {
-        if (item.displayed) item.hide();
-      }
+  ItemSet.prototype._updateItemProps = function(item, props) {
+    // TODO: copy all properties from props to item? (also new ones)
+    if ('start' in props) item.data.start = props.start;
+    if ('end' in props)   item.data.end   = props.end;
+    if ('group' in props && item.data.group != props.group) {
+      this._moveToGroup(item, props.group)
+    }
   };
 
-
   /**
-   * this function is very similar to the _checkIfInvisible() but it does not
-   * return booleans, hides the item if it should not be seen and always adds to
-   * the visibleItems.
-   * this one is for brute forcing and hiding.
-   *
+   * Move an item to another group
    * @param {Item} item
-   * @param {Array} visibleItems
-   * @param {{start:number, end:number}} range
+   * @param {String | Number} groupId
    * @private
    */
-  Group.prototype._checkIfVisibleWithReference = function(item, visibleItems, visibleItemsLookup, range) {
-    if (item.isVisible(range)) {
-      if (visibleItemsLookup[item.id] === undefined) {
-        visibleItemsLookup[item.id] = true;
-        visibleItems.push(item);
-      }
-    }
-    else {
-      if (item.displayed) item.hide();
+  ItemSet.prototype._moveToGroup = function(item, groupId) {
+    var group = this.groups[groupId];
+    if (group && group.groupId != item.data.group) {
+      var oldGroup = item.parent;
+      oldGroup.remove(item);
+      oldGroup.order();
+      group.add(item);
+      group.order();
+
+      item.data.group = group.groupId;
     }
   };
 
-
-
-  module.exports = Group;
-
-
-/***/ },
-/* 31 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-  var Group = __webpack_require__(30);
-
   /**
-   * @constructor BackgroundGroup
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * End of dragging selected items
+   * @param {Event} event
+   * @private
    */
-  function BackgroundGroup (groupId, data, itemSet) {
-    Group.call(this, groupId, data, itemSet);
+  ItemSet.prototype._onDragEnd = function (event) {
+    event.preventDefault()
 
-    this.width = 0;
-    this.height = 0;
-    this.top = 0;
-    this.left = 0;
-  }
+    if (this.touchParams.itemProps) {
+      // prepare a change set for the changed items
+      var changes = [],
+          me = this,
+          dataset = this.itemsData.getDataSet();
 
-  BackgroundGroup.prototype = Object.create(Group.prototype);
+      var itemProps = this.touchParams.itemProps ;
+      this.touchParams.itemProps = null;
+      itemProps.forEach(function (props) {
+        var id = props.item.id,
+            itemData = me.itemsData.get(id, me.itemOptions);
 
-  /**
-   * Repaint this group
-   * @param {{start: number, end: number}} range
-   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
-   * @param {boolean} [restack=false]  Force restacking of all items
-   * @return {boolean} Returns true if the group is resized
-   */
-  BackgroundGroup.prototype.redraw = function(range, margin, restack) {
-    var resized = false;
+        var changed = false;
+        if ('start' in props.item.data) {
+          changed = (props.start != props.item.data.start.valueOf());
+          itemData.start = util.convert(props.item.data.start,
+                  dataset._options.type && dataset._options.type.start || 'Date');
+        }
+        if ('end' in props.item.data) {
+          changed = changed  || (props.end != props.item.data.end.valueOf());
+          itemData.end = util.convert(props.item.data.end,
+                  dataset._options.type && dataset._options.type.end || 'Date');
+        }
+        if ('group' in props.item.data) {
+          changed = changed  || (props.group != props.item.data.group);
+          itemData.group = props.item.data.group;
+        }
 
-    this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+        // only apply changes when start or end is actually changed
+        if (changed) {
+          me.options.onMove(itemData, function (itemData) {
+            if (itemData) {
+              // apply changes
+              itemData[dataset._fieldId] = id; // ensure the item contains its id (can be undefined)
+              changes.push(itemData);
+            }
+            else {
+              // restore original values
+              me._updateItemProps(props.item, props);
 
-    // calculate actual size
-    this.width = this.dom.background.offsetWidth;
+              me.stackDirty = true; // force re-stacking of all items next redraw
+              me.body.emitter.emit('change');
+            }
+          });
+        }
+      });
 
-    // apply new height (just always zero for BackgroundGroup
-    this.dom.background.style.height  = '0';
+      // apply the changes to the data (if there are changes)
+      if (changes.length) {
+        dataset.update(changes);
+      }
 
-    // update vertical position of items after they are re-stacked and the height of the group is calculated
-    for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
-      var item = this.visibleItems[i];
-      item.repositionY(margin);
+      event.stopPropagation();
     }
-
-    return resized;
   };
 
   /**
-   * Show this group: attach to the DOM
+   * Handle selecting/deselecting an item when tapping it
+   * @param {Event} event
+   * @private
    */
-  BackgroundGroup.prototype.show = function() {
-    if (!this.dom.background.parentNode) {
-      this.itemSet.dom.background.appendChild(this.dom.background);
-    }
-  };
-
-  module.exports = BackgroundGroup;
+  ItemSet.prototype._onSelectItem = function (event) {
+    if (!this.options.selectable) return;
 
+    var ctrlKey  = event.gesture.srcEvent && event.gesture.srcEvent.ctrlKey;
+    var shiftKey = event.gesture.srcEvent && event.gesture.srcEvent.shiftKey;
+    if (ctrlKey || shiftKey) {
+      this._onMultiSelectItem(event);
+      return;
+    }
 
-/***/ },
-/* 32 */
-/***/ function(module, exports, __webpack_require__) {
+    var oldSelection = this.getSelection();
 
-  var Hammer = __webpack_require__(45);
-  var util = __webpack_require__(1);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Component = __webpack_require__(25);
-  var Group = __webpack_require__(30);
-  var BackgroundGroup = __webpack_require__(31);
-  var BoxItem = __webpack_require__(22);
-  var PointItem = __webpack_require__(23);
-  var RangeItem = __webpack_require__(24);
-  var BackgroundItem = __webpack_require__(21);
+    var item = ItemSet.itemFromTarget(event);
+    var selection = item ? [item.id] : [];
+    this.setSelection(selection);
 
+    var newSelection = this.getSelection();
 
-  var UNGROUPED = '__ungrouped__';   // reserved group id for ungrouped items
-  var BACKGROUND = '__background__'; // reserved group id for background items without group
+    // emit a select event,
+    // except when old selection is empty and new selection is still empty
+    if (newSelection.length > 0 || oldSelection.length > 0) {
+      this.body.emitter.emit('select', {
+        items: newSelection
+      });
+    }
+  };
 
   /**
-   * An ItemSet holds a set of items and ranges which can be displayed in a
-   * range. The width is determined by the parent of the ItemSet, and the height
-   * is determined by the size of the items.
-   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
-   * @param {Object} [options]      See ItemSet.setOptions for the available options.
-   * @constructor ItemSet
-   * @extends Component
+   * Handle creation and updates of an item on double tap
+   * @param event
+   * @private
    */
-  function ItemSet(body, options) {
-    this.body = body;
-
-    this.defaultOptions = {
-      type: null,  // 'box', 'point', 'range', 'background'
-      orientation: 'bottom',  // 'top' or 'bottom'
-      align: 'auto', // alignment of box items
-      stack: true,
-      groupOrder: null,
+  ItemSet.prototype._onAddItem = function (event) {
+    if (!this.options.selectable) return;
+    if (!this.options.editable.add) return;
 
-      selectable: true,
-      editable: {
-        updateTime: false,
-        updateGroup: false,
-        add: false,
-        remove: false
-      },
+    var me = this,
+        snap = this.body.util.snap || null,
+        item = ItemSet.itemFromTarget(event);
 
-      onAdd: function (item, callback) {
-        callback(item);
-      },
-      onUpdate: function (item, callback) {
-        callback(item);
-      },
-      onMove: function (item, callback) {
-        callback(item);
-      },
-      onRemove: function (item, callback) {
-        callback(item);
-      },
-      onMoving: function (item, callback) {
-        callback(item);
-      },
+    if (item) {
+      // update item
 
-      margin: {
-        item: {
-          horizontal: 10,
-          vertical: 10
-        },
-        axis: 20
-      },
-      padding: 5
-    };
+      // execute async handler to update the item (or cancel it)
+      var itemData = me.itemsData.get(item.id); // get a clone of the data from the dataset
+      this.options.onUpdate(itemData, function (itemData) {
+        if (itemData) {
+          me.itemsData.getDataSet().update(itemData);
+        }
+      });
+    }
+    else {
+      // add item
+      var xAbs = util.getAbsoluteLeft(this.dom.frame);
+      var x = event.gesture.center.pageX - xAbs;
+      var start = this.body.util.toTime(x);
+      var newItem = {
+        start: snap ? snap(start) : start,
+        content: 'new item'
+      };
 
-    // options is shared by this ItemSet and all its items
-    this.options = util.extend({}, this.defaultOptions);
+      // when default type is a range, add a default end date to the new item
+      if (this.options.type === 'range') {
+        var end = this.body.util.toTime(x + this.props.width / 5);
+        newItem.end = snap ? snap(end) : end;
+      }
 
-    // options for getting items from the DataSet with the correct type
-    this.itemOptions = {
-      type: {start: 'Date', end: 'Date'}
-    };
+      newItem[this.itemsData._fieldId] = util.randomUUID();
 
-    this.conversion = {
-      toScreen: body.util.toScreen,
-      toTime: body.util.toTime
-    };
-    this.dom = {};
-    this.props = {};
-    this.hammer = null;
+      var group = ItemSet.groupFromTarget(event);
+      if (group) {
+        newItem.group = group.groupId;
+      }
 
-    var me = this;
-    this.itemsData = null;    // DataSet
-    this.groupsData = null;   // DataSet
+      // execute async handler to customize (or cancel) adding an item
+      this.options.onAdd(newItem, function (item) {
+        if (item) {
+          me.itemsData.getDataSet().add(item);
+          // TODO: need to trigger a redraw?
+        }
+      });
+    }
+  };
 
-    // listeners for the DataSet of the items
-    this.itemListeners = {
-      'add': function (event, params, senderId) {
-        me._onAdd(params.items);
-      },
-      'update': function (event, params, senderId) {
-        me._onUpdate(params.items);
-      },
-      'remove': function (event, params, senderId) {
-        me._onRemove(params.items);
-      }
-    };
+  /**
+   * Handle selecting/deselecting multiple items when holding an item
+   * @param {Event} event
+   * @private
+   */
+  ItemSet.prototype._onMultiSelectItem = function (event) {
+    if (!this.options.selectable) return;
 
-    // listeners for the DataSet of the groups
-    this.groupListeners = {
-      'add': function (event, params, senderId) {
-        me._onAddGroups(params.items);
-      },
-      'update': function (event, params, senderId) {
-        me._onUpdateGroups(params.items);
-      },
-      'remove': function (event, params, senderId) {
-        me._onRemoveGroups(params.items);
-      }
-    };
+    var selection,
+        item = ItemSet.itemFromTarget(event);
 
-    this.items = {};      // object with an Item for every data item
-    this.groups = {};     // Group object for every group
-    this.groupIds = [];
+    if (item) {
+      // multi select items
+      selection = this.getSelection(); // current selection
 
-    this.selection = [];  // list with the ids of all selected nodes
-    this.stackDirty = true; // if true, all items will be restacked on next redraw
+      var shiftKey = event.gesture.touches[0] && event.gesture.touches[0].shiftKey || false;
+      if (shiftKey) {
+        // select all items between the old selection and the tapped item
 
-    this.touchParams = {}; // stores properties while dragging
-    // create the HTML DOM
+        // determine the selection range
+        selection.push(item.id);
+        var range = ItemSet._getItemRange(this.itemsData.get(selection, this.itemOptions));
 
-    this._create();
+        // select all items within the selection range
+        selection = [];
+        for (var id in this.items) {
+          if (this.items.hasOwnProperty(id)) {
+            var _item = this.items[id];
+            var start = _item.data.start;
+            var end = (_item.data.end !== undefined) ? _item.data.end : start;
 
-    this.setOptions(options);
-  }
+            if (start >= range.min && end <= range.max) {
+              selection.push(_item.id); // do not use id but item.id, id itself is stringified
+            }
+          }
+        }
+      }
+      else {
+        // add/remove this item from the current selection
+        var index = selection.indexOf(item.id);
+        if (index == -1) {
+          // item is not yet selected -> select it
+          selection.push(item.id);
+        }
+        else {
+          // item is already selected -> deselect it
+          selection.splice(index, 1);
+        }
+      }
 
-  ItemSet.prototype = new Component();
+      this.setSelection(selection);
 
-  // available item types will be registered here
-  ItemSet.types = {
-    background: BackgroundItem,
-    box: BoxItem,
-    range: RangeItem,
-    point: PointItem
+      this.body.emitter.emit('select', {
+        items: this.getSelection()
+      });
+    }
   };
 
   /**
-   * Create the HTML DOM for the ItemSet
+   * Calculate the time range of a list of items
+   * @param {Array.<Object>} itemsData
+   * @return {{min: Date, max: Date}} Returns the range of the provided items
+   * @private
    */
-  ItemSet.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'itemset';
-    frame['timeline-itemset'] = this;
-    this.dom.frame = frame;
+  ItemSet._getItemRange = function(itemsData) {
+    var max = null;
+    var min = null;
 
-    // create background panel
-    var background = document.createElement('div');
-    background.className = 'background';
-    frame.appendChild(background);
-    this.dom.background = background;
+    itemsData.forEach(function (data) {
+      if (min == null || data.start < min) {
+        min = data.start;
+      }
 
-    // create foreground panel
-    var foreground = document.createElement('div');
-    foreground.className = 'foreground';
-    frame.appendChild(foreground);
-    this.dom.foreground = foreground;
+      if (data.end != undefined) {
+        if (max == null || data.end > max) {
+          max = data.end;
+        }
+      }
+      else {
+        if (max == null || data.start > max) {
+          max = data.start;
+        }
+      }
+    });
 
-    // create axis panel
-    var axis = document.createElement('div');
-    axis.className = 'axis';
-    this.dom.axis = axis;
+    return {
+      min: min,
+      max: max
+    }
+  };
 
-    // create labelset
-    var labelSet = document.createElement('div');
-    labelSet.className = 'labelset';
-    this.dom.labelSet = labelSet;
+  /**
+   * Find an item from an event target:
+   * searches for the attribute 'timeline-item' in the event target's element tree
+   * @param {Event} event
+   * @return {Item | null} item
+   */
+  ItemSet.itemFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-item')) {
+        return target['timeline-item'];
+      }
+      target = target.parentNode;
+    }
 
-    // create ungrouped Group
-    this._updateUngrouped();
+    return null;
+  };
 
-    // create background Group
-    var backgroundGroup = new BackgroundGroup(BACKGROUND, null, this);
-    backgroundGroup.show();
-    this.groups[BACKGROUND] = backgroundGroup;
+  /**
+   * Find the Group from an event target:
+   * searches for the attribute 'timeline-group' in the event target's element tree
+   * @param {Event} event
+   * @return {Group | null} group
+   */
+  ItemSet.groupFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-group')) {
+        return target['timeline-group'];
+      }
+      target = target.parentNode;
+    }
 
-    // attach event listeners
-    // Note: we bind to the centerContainer for the case where the height
-    //       of the center container is larger than of the ItemSet, so we
-    //       can click in the empty area to create a new item or deselect an item.
-    this.hammer = Hammer(this.body.dom.centerContainer, {
-      preventDefault: true
-    });
+    return null;
+  };
 
-    // drag items when selected
-    this.hammer.on('touch',     this._onTouch.bind(this));
-    this.hammer.on('dragstart', this._onDragStart.bind(this));
-    this.hammer.on('drag',      this._onDrag.bind(this));
-    this.hammer.on('dragend',   this._onDragEnd.bind(this));
+  /**
+   * Find the ItemSet from an event target:
+   * searches for the attribute 'timeline-itemset' in the event target's element tree
+   * @param {Event} event
+   * @return {ItemSet | null} item
+   */
+  ItemSet.itemSetFromTarget = function(event) {
+    var target = event.target;
+    while (target) {
+      if (target.hasOwnProperty('timeline-itemset')) {
+        return target['timeline-itemset'];
+      }
+      target = target.parentNode;
+    }
 
-    // single select (or unselect) when tapping an item
-    this.hammer.on('tap',  this._onSelectItem.bind(this));
+    return null;
+  };
 
-    // multi select when holding mouse/touch, or on ctrl+click
-    this.hammer.on('hold', this._onMultiSelectItem.bind(this));
+  module.exports = ItemSet;
 
-    // add item on doubletap
-    this.hammer.on('doubletap', this._onAddItem.bind(this));
 
-    // attach to the DOM
-    this.show();
-  };
+/***/ },
+/* 28 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(2);
+  var Component = __webpack_require__(20);
 
   /**
-   * Set options for the ItemSet. Existing options will be extended/overwritten.
-   * @param {Object} [options] The following options are available:
-   *                           {String} type
-   *                              Default type for the items. Choose from 'box'
-   *                              (default), 'point', 'range', or 'background'.
-   *                              The default style can be overwritten by
-   *                              individual items.
-   *                           {String} align
-   *                              Alignment for the items, only applicable for
-   *                              BoxItem. Choose 'center' (default), 'left', or
-   *                              'right'.
-   *                           {String} orientation
-   *                              Orientation of the item set. Choose 'top' or
-   *                              'bottom' (default).
-   *                           {Function} groupOrder
-   *                              A sorting function for ordering groups
-   *                           {Boolean} stack
-   *                              If true (deafult), items will be stacked on
-   *                              top of each other.
-   *                           {Number} margin.axis
-   *                              Margin between the axis and the items in pixels.
-   *                              Default is 20.
-   *                           {Number} margin.item.horizontal
-   *                              Horizontal margin between items in pixels.
-   *                              Default is 10.
-   *                           {Number} margin.item.vertical
-   *                              Vertical Margin between items in pixels.
-   *                              Default is 10.
-   *                           {Number} margin.item
-   *                              Margin between items in pixels in both horizontal
-   *                              and vertical direction. Default is 10.
-   *                           {Number} margin
-   *                              Set margin for both axis and items in pixels.
-   *                           {Number} padding
-   *                              Padding of the contents of an item in pixels.
-   *                              Must correspond with the items css. Default is 5.
-   *                           {Boolean} selectable
-   *                              If true (default), items can be selected.
-   *                           {Boolean} editable
-   *                              Set all editable options to true or false
-   *                           {Boolean} editable.updateTime
-   *                              Allow dragging an item to an other moment in time
-   *                           {Boolean} editable.updateGroup
-   *                              Allow dragging an item to an other group
-   *                           {Boolean} editable.add
-   *                              Allow creating new items on double tap
-   *                           {Boolean} editable.remove
-   *                              Allow removing items by clicking the delete button
-   *                              top right of a selected item.
-   *                           {Function(item: Item, callback: Function)} onAdd
-   *                              Callback function triggered when an item is about to be added:
-   *                              when the user double taps an empty space in the Timeline.
-   *                           {Function(item: Item, callback: Function)} onUpdate
-   *                              Callback function fired when an item is about to be updated.
-   *                              This function typically has to show a dialog where the user
-   *                              change the item. If not implemented, nothing happens.
-   *                           {Function(item: Item, callback: Function)} onMove
-   *                              Fired when an item has been moved. If not implemented,
-   *                              the move action will be accepted.
-   *                           {Function(item: Item, callback: Function)} onRemove
-   *                              Fired when an item is about to be deleted.
-   *                              If not implemented, the item will be always removed.
+   * Legend for Graph2d
    */
-  ItemSet.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide'];
-      util.selectiveExtend(fields, this.options, options);
-
-      if ('margin' in options) {
-        if (typeof options.margin === 'number') {
-          this.options.margin.axis = options.margin;
-          this.options.margin.item.horizontal = options.margin;
-          this.options.margin.item.vertical = options.margin;
-        }
-        else if (typeof options.margin === 'object') {
-          util.selectiveExtend(['axis'], this.options.margin, options.margin);
-          if ('item' in options.margin) {
-            if (typeof options.margin.item === 'number') {
-              this.options.margin.item.horizontal = options.margin.item;
-              this.options.margin.item.vertical = options.margin.item;
-            }
-            else if (typeof options.margin.item === 'object') {
-              util.selectiveExtend(['horizontal', 'vertical'], this.options.margin.item, options.margin.item);
-            }
-          }
-        }
+  function Legend(body, options, side, linegraphOptions) {
+    this.body = body;
+    this.defaultOptions = {
+      enabled: true,
+      icons: true,
+      iconSize: 20,
+      iconSpacing: 6,
+      left: {
+        visible: true,
+        position: 'top-left' // top/bottom - left,center,right
+      },
+      right: {
+        visible: true,
+        position: 'top-left' // top/bottom - left,center,right
       }
+    }
+    this.side = side;
+    this.options = util.extend({},this.defaultOptions);
+    this.linegraphOptions = linegraphOptions;
 
-      if ('editable' in options) {
-        if (typeof options.editable === 'boolean') {
-          this.options.editable.updateTime  = options.editable;
-          this.options.editable.updateGroup = options.editable;
-          this.options.editable.add         = options.editable;
-          this.options.editable.remove      = options.editable;
-        }
-        else if (typeof options.editable === 'object') {
-          util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
-        }
-      }
+    this.svgElements = {};
+    this.dom = {};
+    this.groups = {};
+    this.amountOfGroups = 0;
+    this._create();
 
-      // callback functions
-      var addCallback = (function (name) {
-        var fn = options[name];
-        if (fn) {
-          if (!(fn instanceof Function)) {
-            throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
-          }
-          this.options[name] = fn;
-        }
-      }).bind(this);
-      ['onAdd', 'onUpdate', 'onRemove', 'onMove', 'onMoving'].forEach(addCallback);
+    this.setOptions(options);
+  }
 
-      // force the itemSet to refresh: options like orientation and margins may be changed
-      this.markDirty();
+  Legend.prototype = new Component();
+
+  Legend.prototype.clear = function() {
+    this.groups = {};
+    this.amountOfGroups = 0;
+  }
+
+  Legend.prototype.addGroup = function(label, graphOptions) {
+
+    if (!this.groups.hasOwnProperty(label)) {
+      this.groups[label] = graphOptions;
     }
+    this.amountOfGroups += 1;
   };
 
-  /**
-   * Mark the ItemSet dirty so it will refresh everything with next redraw
-   */
-  ItemSet.prototype.markDirty = function() {
-    this.groupIds = [];
-    this.stackDirty = true;
+  Legend.prototype.updateGroup = function(label, graphOptions) {
+    this.groups[label] = graphOptions;
   };
 
-  /**
-   * Destroy the ItemSet
-   */
-  ItemSet.prototype.destroy = function() {
-    this.hide();
-    this.setItems(null);
-    this.setGroups(null);
+  Legend.prototype.removeGroup = function(label) {
+    if (this.groups.hasOwnProperty(label)) {
+      delete this.groups[label];
+      this.amountOfGroups -= 1;
+    }
+  };
 
-    this.hammer = null;
+  Legend.prototype._create = function() {
+    this.dom.frame = document.createElement('div');
+    this.dom.frame.className = 'legend';
+    this.dom.frame.style.position = "absolute";
+    this.dom.frame.style.top = "10px";
+    this.dom.frame.style.display = "block";
 
-    this.body = null;
-    this.conversion = null;
+    this.dom.textArea = document.createElement('div');
+    this.dom.textArea.className = 'legendText';
+    this.dom.textArea.style.position = "relative";
+    this.dom.textArea.style.top = "0px";
+
+    this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
+    this.svg.style.position = 'absolute';
+    this.svg.style.top = 0 +'px';
+    this.svg.style.width = this.options.iconSize + 5 + 'px';
+    this.svg.style.height = '100%';
+
+    this.dom.frame.appendChild(this.svg);
+    this.dom.frame.appendChild(this.dom.textArea);
   };
 
   /**
    * Hide the component from the DOM
    */
-  ItemSet.prototype.hide = function() {
+  Legend.prototype.hide = function() {
     // remove the frame containing the items
     if (this.dom.frame.parentNode) {
       this.dom.frame.parentNode.removeChild(this.dom.frame);
     }
-
-    // remove the axis with dots
-    if (this.dom.axis.parentNode) {
-      this.dom.axis.parentNode.removeChild(this.dom.axis);
-    }
-
-    // remove the labelset containing all group labels
-    if (this.dom.labelSet.parentNode) {
-      this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
-    }
   };
 
   /**
    * Show the component in the DOM (when not already visible).
    * @return {Boolean} changed
    */
-  ItemSet.prototype.show = function() {
+  Legend.prototype.show = function() {
     // show frame containing the items
     if (!this.dom.frame.parentNode) {
       this.body.dom.center.appendChild(this.dom.frame);
     }
+  };
 
-    // show axis with dots
-    if (!this.dom.axis.parentNode) {
-      this.body.dom.backgroundVertical.appendChild(this.dom.axis);
-    }
+  Legend.prototype.setOptions = function(options) {
+    var fields = ['enabled','orientation','icons','left','right'];
+    util.selectiveDeepExtend(fields, this.options, options);
+  };
 
-    // show labelset containing labels
-    if (!this.dom.labelSet.parentNode) {
-      this.body.dom.left.appendChild(this.dom.labelSet);
+  Legend.prototype.redraw = function() {
+    var activeGroups = 0;
+    for (var groupId in this.groups) {
+      if (this.groups.hasOwnProperty(groupId)) {
+        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+          activeGroups++;
+        }
+      }
     }
-  };
 
-  /**
-   * Set selected items by their id. Replaces the current selection
-   * Unknown id's are silently ignored.
-   * @param {string[] | string} [ids] An array with zero or more id's of the items to be
-   *                                  selected, or a single item id. If ids is undefined
-   *                                  or an empty array, all items will be unselected.
-   */
-  ItemSet.prototype.setSelection = function(ids) {
-    var i, ii, id, item;
+    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false || activeGroups == 0) {
+      this.hide();
+    }
+    else {
+      this.show();
+      if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
+        this.dom.frame.style.left = '4px';
+        this.dom.frame.style.textAlign = "left";
+        this.dom.textArea.style.textAlign = "left";
+        this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
+        this.dom.textArea.style.right = '';
+        this.svg.style.left = 0 +'px';
+        this.svg.style.right = '';
+      }
+      else {
+        this.dom.frame.style.right = '4px';
+        this.dom.frame.style.textAlign = "right";
+        this.dom.textArea.style.textAlign = "right";
+        this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
+        this.dom.textArea.style.left = '';
+        this.svg.style.right = 0 +'px';
+        this.svg.style.left = '';
+      }
 
-    if (ids == undefined) ids = [];
-    if (!Array.isArray(ids)) ids = [ids];
+      if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
+        this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+        this.dom.frame.style.bottom = '';
+      }
+      else {
+        var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
+        this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+        this.dom.frame.style.top = '';
+      }
 
-    // unselect currently selected items
-    for (i = 0, ii = this.selection.length; i < ii; i++) {
-      id = this.selection[i];
-      item = this.items[id];
-      if (item) item.unselect();
-    }
+      if (this.options.icons == false) {
+        this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
+        this.dom.textArea.style.right = '';
+        this.dom.textArea.style.left = '';
+        this.svg.style.width = '0px';
+      }
+      else {
+        this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
+        this.drawLegendIcons();
+      }
 
-    // select items
-    this.selection = [];
-    for (i = 0, ii = ids.length; i < ii; i++) {
-      id = ids[i];
-      item = this.items[id];
-      if (item) {
-        this.selection.push(id);
-        item.select();
+      var content = '';
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+            content += this.groups[groupId].content + '<br />';
+          }
+        }
       }
+      this.dom.textArea.innerHTML = content;
+      this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
     }
   };
 
-  /**
-   * Get the selected items by their id
-   * @return {Array} ids  The ids of the selected items
-   */
-  ItemSet.prototype.getSelection = function() {
-    return this.selection.concat([]);
-  };
-
-  /**
-   * Get the id's of the currently visible items.
-   * @returns {Array} The ids of the visible items
-   */
-  ItemSet.prototype.getVisibleItems = function() {
-    var range = this.body.range.getRange();
-    var left  = this.body.util.toScreen(range.start);
-    var right = this.body.util.toScreen(range.end);
+  Legend.prototype.drawLegendIcons = function() {
+    if (this.dom.frame.parentNode) {
+      DOMutil.prepareElements(this.svgElements);
+      var padding = window.getComputedStyle(this.dom.frame).paddingTop;
+      var iconOffset = Number(padding.replace('px',''));
+      var x = iconOffset;
+      var iconWidth = this.options.iconSize;
+      var iconHeight = 0.75 * this.options.iconSize;
+      var y = iconOffset + 0.5 * iconHeight + 3;
 
-    var ids = [];
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        var group = this.groups[groupId];
-        var rawVisibleItems = group.visibleItems;
+      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
 
-        // filter the "raw" set with visibleItems into a set which is really
-        // visible by pixels
-        for (var i = 0; i < rawVisibleItems.length; i++) {
-          var item = rawVisibleItems[i];
-          // TODO: also check whether visible vertically
-          if ((item.left < right) && (item.left + item.width > left)) {
-            ids.push(item.id);
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+            this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+            y += iconHeight + this.options.iconSpacing;
           }
         }
       }
-    }
 
-    return ids;
-  };
-
-  /**
-   * Deselect a selected item
-   * @param {String | Number} id
-   * @private
-   */
-  ItemSet.prototype._deselect = function(id) {
-    var selection = this.selection;
-    for (var i = 0, ii = selection.length; i < ii; i++) {
-      if (selection[i] == id) { // non-strict comparison!
-        selection.splice(i, 1);
-        break;
-      }
+      DOMutil.cleanupElements(this.svgElements);
     }
   };
 
-  /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
-   */
-  ItemSet.prototype.redraw = function() {
-    var margin = this.options.margin,
-        range = this.body.range,
-        asSize = util.option.asSize,
-        options = this.options,
-        orientation = options.orientation,
-        resized = false,
-        frame = this.dom.frame,
-        editable = options.editable.updateTime || options.editable.updateGroup;
+  module.exports = Legend;
 
-    // recalculate absolute position (before redrawing groups)
-    this.props.top = this.body.domProps.top.height + this.body.domProps.border.top;
-    this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
 
-    // update class name
-    frame.className = 'itemset' + (editable ? ' editable' : '');
+/***/ },
+/* 29 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // reorder the groups (if needed)
-    resized = this._orderGroups() || resized;
+  var util = __webpack_require__(1);
+  var DOMutil = __webpack_require__(2);
+  var DataSet = __webpack_require__(3);
+  var DataView = __webpack_require__(4);
+  var Component = __webpack_require__(20);
+  var DataAxis = __webpack_require__(23);
+  var GraphGroup = __webpack_require__(24);
+  var Legend = __webpack_require__(28);
+  var BarGraphFunctions = __webpack_require__(53);
 
-    // check whether zoomed (in that case we need to re-stack everything)
-    // TODO: would be nicer to get this as a trigger from Range
-    var visibleInterval = range.end - range.start;
-    var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth);
-    if (zoomed) this.stackDirty = true;
-    this.lastVisibleInterval = visibleInterval;
-    this.props.lastWidth = this.props.width;
+  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
 
-    var restack = this.stackDirty;
-    var firstGroup = this._firstGroup();
-    var firstMargin = {
-      item: margin.item,
-      axis: margin.axis
-    };
-    var nonFirstMargin = {
-      item: margin.item,
-      axis: margin.item.vertical / 2
+  /**
+   * This is the constructor of the LineGraph. It requires a Timeline body and options.
+   *
+   * @param body
+   * @param options
+   * @constructor
+   */
+  function LineGraph(body, options) {
+    this.id = util.randomUUID();
+    this.body = body;
+
+    this.defaultOptions = {
+      yAxisOrientation: 'left',
+      defaultGroup: 'default',
+      sort: true,
+      sampling: true,
+      graphHeight: '400px',
+      shaded: {
+        enabled: false,
+        orientation: 'bottom' // top, bottom
+      },
+      style: 'line', // line, bar
+      barChart: {
+        width: 50,
+        handleOverlap: 'overlap',
+        align: 'center' // left, center, right
+      },
+      catmullRom: {
+        enabled: true,
+        parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
+        alpha: 0.5
+      },
+      drawPoints: {
+        enabled: true,
+        size: 6,
+        style: 'square' // square, circle
+      },
+      dataAxis: {
+        showMinorLabels: true,
+        showMajorLabels: true,
+        icons: false,
+        width: '40px',
+        visible: true,
+        alignZeros: true,
+        customRange: {
+          left: {min:undefined, max:undefined},
+          right: {min:undefined, max:undefined}
+        }
+        //, these options are not set by default, but this shows the format they will be in
+        //format: {
+        //  left: {decimals: 2},
+        //  right: {decimals: 2}
+        //},
+        //title: {
+        //  left: {
+        //    text: 'left',
+        //    style: 'color:black;'
+        //  },
+        //  right: {
+        //    text: 'right',
+        //    style: 'color:black;'
+        //  }
+        //}
+      },
+      legend: {
+        enabled: false,
+        icons: true,
+        left: {
+          visible: true,
+          position: 'top-left' // top/bottom - left,right
+        },
+        right: {
+          visible: true,
+          position: 'top-right' // top/bottom - left,right
+        }
+      },
+      groups: {
+        visibility: {}
+      }
     };
-    var height = 0;
-    var minHeight = margin.axis + margin.item.vertical;
 
-    // redraw the background group
-    this.groups[BACKGROUND].redraw(range, nonFirstMargin, restack);
+    // options is shared by this ItemSet and all its items
+    this.options = util.extend({}, this.defaultOptions);
+    this.dom = {};
+    this.props = {};
+    this.hammer = null;
+    this.groups = {};
+    this.abortedGraphUpdate = false;
+    this.updateSVGheight = false;
+    this.updateSVGheightOnResize = false;
 
-    // redraw all regular groups
-    util.forEach(this.groups, function (group) {
-      var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
-      var groupResized = group.redraw(range, groupMargin, restack);
-      resized = groupResized || resized;
-      height += group.height;
-    });
-    height = Math.max(height, minHeight);
-    this.stackDirty = false;
+    var me = this;
+    this.itemsData = null;    // DataSet
+    this.groupsData = null;   // DataSet
 
-    // update frame height
-    frame.style.height  = asSize(height);
+    // listeners for the DataSet of the items
+    this.itemListeners = {
+      'add': function (event, params, senderId) {
+        me._onAdd(params.items);
+      },
+      'update': function (event, params, senderId) {
+        me._onUpdate(params.items);
+      },
+      'remove': function (event, params, senderId) {
+        me._onRemove(params.items);
+      }
+    };
 
-    // calculate actual size
-    this.props.width = frame.offsetWidth;
-    this.props.height = height;
+    // listeners for the DataSet of the groups
+    this.groupListeners = {
+      'add': function (event, params, senderId) {
+        me._onAddGroups(params.items);
+      },
+      'update': function (event, params, senderId) {
+        me._onUpdateGroups(params.items);
+      },
+      'remove': function (event, params, senderId) {
+        me._onRemoveGroups(params.items);
+      }
+    };
 
-    // reposition axis
-    this.dom.axis.style.top = asSize((orientation == 'top') ?
-        (this.body.domProps.top.height + this.body.domProps.border.top) :
-        (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
-    this.dom.axis.style.left = '0';
+    this.items = {};      // object with an Item for every data item
+    this.selection = [];  // list with the ids of all selected nodes
+    this.lastStart = this.body.range.start;
+    this.touchParams = {}; // stores properties while dragging
 
-    // check if this component is resized
-    resized = this._isResized() || resized;
+    this.svgElements = {};
+    this.setOptions(options);
+    this.groupsUsingDefaultStyles = [0];
+    this.COUNTER = 0;
+    this.body.emitter.on('rangechanged', function() {
+      me.lastStart = me.body.range.start;
+      me.svg.style.left = util.option.asSize(-me.props.width);
+      me.redraw.call(me,true);
+    });
 
-    return resized;
-  };
+    // create the HTML DOM
+    this._create();
+    this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
+    this.body.emitter.emit('change');
+
+  }
+
+  LineGraph.prototype = new Component();
 
   /**
-   * Get the first group, aligned with the axis
-   * @return {Group | null} firstGroup
-   * @private
+   * Create the HTML DOM for the ItemSet
    */
-  ItemSet.prototype._firstGroup = function() {
-    var firstGroupIndex = (this.options.orientation == 'top') ? 0 : (this.groupIds.length - 1);
-    var firstGroupId = this.groupIds[firstGroupIndex];
-    var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
+  LineGraph.prototype._create = function(){
+    var frame = document.createElement('div');
+    frame.className = 'LineGraph';
+    this.dom.frame = frame;
 
-    return firstGroup || null;
+    // create svg element for graph drawing.
+    this.svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
+    this.svg.style.position = 'relative';
+    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+    this.svg.style.display = 'block';
+    frame.appendChild(this.svg);
+
+    // data axis
+    this.options.dataAxis.orientation = 'left';
+    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+
+    this.options.dataAxis.orientation = 'right';
+    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+    delete this.options.dataAxis.orientation;
+
+    // legends
+    this.legendLeft = new Legend(this.body, this.options.legend, 'left', this.options.groups);
+    this.legendRight = new Legend(this.body, this.options.legend, 'right', this.options.groups);
+
+    this.show();
   };
 
   /**
-   * Create or delete the group holding all ungrouped items. This group is used when
-   * there are no groups specified.
-   * @protected
+   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
+   * @param {object} options
    */
-  ItemSet.prototype._updateUngrouped = function() {
-    var ungrouped = this.groups[UNGROUPED];
-    var background = this.groups[BACKGROUND];
-    var item, itemId;
-
-    if (this.groupsData) {
-      // remove the group holding all ungrouped items
-      if (ungrouped) {
-        ungrouped.hide();
-        delete this.groups[UNGROUPED];
+  LineGraph.prototype.setOptions = function(options) {
+    if (options) {
+      var fields = ['sampling','defaultGroup','height','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
+      if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) {
+        this.updateSVGheight = true;
+        this.updateSVGheightOnResize = true;
+      }
+      else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
+        if (parseInt((options.graphHeight + '').replace("px",'')) < this.body.domProps.centerContainer.height) {
+          this.updateSVGheight = true;
+        }
+      }
+      util.selectiveDeepExtend(fields, this.options, options);
+      util.mergeOptions(this.options, options,'catmullRom');
+      util.mergeOptions(this.options, options,'drawPoints');
+      util.mergeOptions(this.options, options,'shaded');
+      util.mergeOptions(this.options, options,'legend');
 
-        for (itemId in this.items) {
-          if (this.items.hasOwnProperty(itemId)) {
-            item = this.items[itemId];
-            item.parent && item.parent.remove(item);
-            var groupId = this._getGroupId(item.data);
-            var group = this.groups[groupId];
-            group && group.add(item) || item.hide();
+      if (options.catmullRom) {
+        if (typeof options.catmullRom == 'object') {
+          if (options.catmullRom.parametrization) {
+            if (options.catmullRom.parametrization == 'uniform') {
+              this.options.catmullRom.alpha = 0;
+            }
+            else if (options.catmullRom.parametrization == 'chordal') {
+              this.options.catmullRom.alpha = 1.0;
+            }
+            else {
+              this.options.catmullRom.parametrization = 'centripetal';
+              this.options.catmullRom.alpha = 0.5;
+            }
           }
         }
       }
-    }
-    else {
-      // create a group holding all (unfiltered) items
-      if (!ungrouped) {
-        var id = null;
-        var data = null;
-        ungrouped = new Group(id, data, this);
-        this.groups[UNGROUPED] = ungrouped;
 
-        for (itemId in this.items) {
-          if (this.items.hasOwnProperty(itemId)) {
-            item = this.items[itemId];
-            ungrouped.add(item);
-          }
+      if (this.yAxisLeft) {
+        if (options.dataAxis !== undefined) {
+          this.yAxisLeft.setOptions(this.options.dataAxis);
+          this.yAxisRight.setOptions(this.options.dataAxis);
         }
+      }
 
-        ungrouped.show();
+      if (this.legendLeft) {
+        if (options.legend !== undefined) {
+          this.legendLeft.setOptions(this.options.legend);
+          this.legendRight.setOptions(this.options.legend);
+        }
+      }
+
+      if (this.groups.hasOwnProperty(UNGROUPED)) {
+        this.groups[UNGROUPED].setOptions(options);
       }
     }
+
+    // this is used to redraw the graph if the visibility of the groups is changed.
+    if (this.dom.frame) {
+      this.redraw(true);
+    }
   };
 
   /**
-   * Get the element for the labelset
-   * @return {HTMLElement} labelSet
+   * Hide the component from the DOM
    */
-  ItemSet.prototype.getLabelSet = function() {
-    return this.dom.labelSet;
+  LineGraph.prototype.hide = function() {
+    // remove the frame containing the items
+    if (this.dom.frame.parentNode) {
+      this.dom.frame.parentNode.removeChild(this.dom.frame);
+    }
   };
 
+
+  /**
+   * Show the component in the DOM (when not already visible).
+   * @return {Boolean} changed
+   */
+  LineGraph.prototype.show = function() {
+    // show frame containing the items
+    if (!this.dom.frame.parentNode) {
+      this.body.dom.center.appendChild(this.dom.frame);
+    }
+  };
+
+
   /**
    * Set items
    * @param {vis.DataSet | null} items
    */
-  ItemSet.prototype.setItems = function(items) {
+  LineGraph.prototype.setItems = function(items) {
     var me = this,
-        ids,
-        oldItemsData = this.itemsData;
+      ids,
+      oldItemsData = this.itemsData;
 
     // replace the dataset
     if (!items) {
@@ -12924,27 +13145,20 @@ return /******/ (function(modules) { // webpackBootstrap
       // add all new items
       ids = this.itemsData.getIds();
       this._onAdd(ids);
-
-      // update the group holding all ungrouped items
-      this._updateUngrouped();
     }
+    this._updateUngrouped();
+    //this._updateGraph();
+    this.redraw(true);
   };
 
-  /**
-   * Get the current items
-   * @returns {vis.DataSet | null}
-   */
-  ItemSet.prototype.getItems = function() {
-    return this.itemsData;
-  };
 
   /**
    * Set groups
    * @param {vis.DataSet} groups
    */
-  ItemSet.prototype.setGroups = function(groups) {
-    var me = this,
-        ids;
+  LineGraph.prototype.setGroups = function(groups) {
+    var me = this;
+    var ids;
 
     // unsubscribe from current dataset
     if (this.groupsData) {
@@ -12980,2486 +13194,2294 @@ return /******/ (function(modules) { // webpackBootstrap
       ids = this.groupsData.getIds();
       this._onAddGroups(ids);
     }
-
-    // update the group holding all ungrouped items
-    this._updateUngrouped();
-
-    // update the order of all items in each group
-    this._order();
-
-    this.body.emitter.emit('change', {queue: true});
+    this._onUpdate();
   };
 
-  /**
-   * Get the current groups
-   * @returns {vis.DataSet | null} groups
-   */
-  ItemSet.prototype.getGroups = function() {
-    return this.groupsData;
-  };
 
   /**
-   * Remove an item by its id
-   * @param {String | Number} id
+   * Update the data
+   * @param [ids]
+   * @private
    */
-  ItemSet.prototype.removeItem = function(id) {
-    var item = this.itemsData.get(id),
-        dataset = this.itemsData.getDataSet();
-
-    if (item) {
-      // confirm deletion
-      this.options.onRemove(item, function (item) {
-        if (item) {
-          // remove by id here, it is possible that an item has no id defined
-          // itself, so better not delete by the item itself
-          dataset.remove(id);
-        }
-      });
+  LineGraph.prototype._onUpdate = function(ids) {
+    this._updateUngrouped();
+    this._updateAllGroupData();
+    //this._updateGraph();
+    this.redraw(true);
+  };
+  LineGraph.prototype._onAdd          = function (ids) {this._onUpdate(ids);};
+  LineGraph.prototype._onRemove       = function (ids) {this._onUpdate(ids);};
+  LineGraph.prototype._onUpdateGroups  = function (groupIds) {
+    for (var i = 0; i < groupIds.length; i++) {
+      var group = this.groupsData.get(groupIds[i]);
+      this._updateGroup(group, groupIds[i]);
     }
+
+    //this._updateGraph();
+    this.redraw(true);
   };
+  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
+
 
   /**
-   * Get the time of an item based on it's data and options.type
-   * @param {Object} itemData
-   * @returns {string} Returns the type
+   * this cleans the group out off the legends and the dataaxis, updates the ungrouped and updates the graph
+   * @param {Array} groupIds
    * @private
    */
-  ItemSet.prototype._getType = function (itemData) {
-    return itemData.type || this.options.type || (itemData.end ? 'range' : 'box');
+  LineGraph.prototype._onRemoveGroups = function (groupIds) {
+    for (var i = 0; i < groupIds.length; i++) {
+      if (this.groups.hasOwnProperty(groupIds[i])) {
+        if (this.groups[groupIds[i]].options.yAxisOrientation == 'right') {
+          this.yAxisRight.removeGroup(groupIds[i]);
+          this.legendRight.removeGroup(groupIds[i]);
+          this.legendRight.redraw();
+        }
+        else {
+          this.yAxisLeft.removeGroup(groupIds[i]);
+          this.legendLeft.removeGroup(groupIds[i]);
+          this.legendLeft.redraw();
+        }
+        delete this.groups[groupIds[i]];
+      }
+    }
+    this._updateUngrouped();
+    //this._updateGraph();
+    this.redraw(true);
   };
 
 
   /**
-   * Get the group id for an item
-   * @param {Object} itemData
-   * @returns {string} Returns the groupId
+   * update a group object with the group dataset entree
+   *
+   * @param group
+   * @param groupId
    * @private
    */
-  ItemSet.prototype._getGroupId = function (itemData) {
-    var type = this._getType(itemData);
-    if (type == 'background' && itemData.group == undefined) {
-     return BACKGROUND;
+  LineGraph.prototype._updateGroup = function (group, groupId) {
+    if (!this.groups.hasOwnProperty(groupId)) {
+      this.groups[groupId] = new GraphGroup(group, groupId, this.options, this.groupsUsingDefaultStyles);
+      if (this.groups[groupId].options.yAxisOrientation == 'right') {
+        this.yAxisRight.addGroup(groupId, this.groups[groupId]);
+        this.legendRight.addGroup(groupId, this.groups[groupId]);
+      }
+      else {
+        this.yAxisLeft.addGroup(groupId, this.groups[groupId]);
+        this.legendLeft.addGroup(groupId, this.groups[groupId]);
+      }
     }
     else {
-      return this.groupsData ? itemData.group : UNGROUPED;
+      this.groups[groupId].update(group);
+      if (this.groups[groupId].options.yAxisOrientation == 'right') {
+        this.yAxisRight.updateGroup(groupId, this.groups[groupId]);
+        this.legendRight.updateGroup(groupId, this.groups[groupId]);
+      }
+      else {
+        this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
+        this.legendLeft.updateGroup(groupId, this.groups[groupId]);
+      }
     }
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
   };
 
+
   /**
-   * Handle updated items
-   * @param {Number[]} ids
-   * @protected
+   * this updates all groups, it is used when there is an update the the itemset.
+   *
+   * @private
    */
-  ItemSet.prototype._onUpdate = function(ids) {
-    var me = this;
-
-    ids.forEach(function (id) {
-      var itemData = me.itemsData.get(id, me.itemOptions);
-      var item = me.items[id];
-      var type = me._getType(itemData);
-
-      var constructor = ItemSet.types[type];
-
-      if (item) {
-        // update item
-        if (!constructor || !(item instanceof constructor)) {
-          // item type has changed, delete the item and recreate it
-          me._removeItem(item);
-          item = null;
-        }
-        else {
-          me._updateItem(item, itemData);
+  LineGraph.prototype._updateAllGroupData = function () {
+    if (this.itemsData != null) {
+      var groupsContent = {};
+      var groupId;
+      for (groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          groupsContent[groupId] = [];
         }
       }
-
-      if (!item) {
-        // create item
-        if (constructor) {
-          item = new constructor(itemData, me.conversion, me.options);
-          item.id = id; // TODO: not so nice setting id afterwards
-          me._addItem(item);
-        }
-        else if (type == 'rangeoverflow') {
-          // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
-          throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
-              '.vis.timeline .item.range .content {overflow: visible;}');
+      for (var itemId in this.itemsData._data) {
+        if (this.itemsData._data.hasOwnProperty(itemId)) {
+          var item = this.itemsData._data[itemId];
+          if (groupsContent[item.group] === undefined) {
+            throw new Error('Cannot find referenced group. Possible reason: items added before groups? Groups need to be added before items, as items refer to groups.')
+          }
+          item.x = util.convert(item.x,'Date');
+          groupsContent[item.group].push(item);
         }
-        else {
-          throw new TypeError('Unknown item type "' + type + '"');
+      }
+      for (groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          this.groups[groupId].setItems(groupsContent[groupId]);
         }
       }
-    });
-
-    this._order();
-    this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change', {queue: true});
+    }
   };
 
-  /**
-   * Handle added items
-   * @param {Number[]} ids
-   * @protected
-   */
-  ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
 
   /**
-   * Handle removed items
-   * @param {Number[]} ids
+   * Create or delete the group holding all ungrouped items. This group is used when
+   * there are no groups specified. This anonymous group is called 'graph'.
    * @protected
    */
-  ItemSet.prototype._onRemove = function(ids) {
-    var count = 0;
-    var me = this;
-    ids.forEach(function (id) {
-      var item = me.items[id];
-      if (item) {
-        count++;
-        me._removeItem(item);
+  LineGraph.prototype._updateUngrouped = function() {
+    if (this.itemsData && this.itemsData != null) {
+      var ungroupedCounter = 0;
+      for (var itemId in this.itemsData._data) {
+        if (this.itemsData._data.hasOwnProperty(itemId)) {
+          var item = this.itemsData._data[itemId];
+          if (item != undefined) {
+            if (item.hasOwnProperty('group')) {
+              if (item.group === undefined) {
+                item.group = UNGROUPED;
+              }
+            }
+            else {
+              item.group = UNGROUPED;
+            }
+            ungroupedCounter = item.group == UNGROUPED ? ungroupedCounter + 1 : ungroupedCounter;
+          }
+        }
       }
-    });
 
-    if (count) {
-      // update order
-      this._order();
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change', {queue: true});
+      if (ungroupedCounter == 0) {
+        delete this.groups[UNGROUPED];
+        this.legendLeft.removeGroup(UNGROUPED);
+        this.legendRight.removeGroup(UNGROUPED);
+        this.yAxisLeft.removeGroup(UNGROUPED);
+        this.yAxisRight.removeGroup(UNGROUPED);
+      }
+      else {
+        var group = {id: UNGROUPED, content: this.options.defaultGroup};
+        this._updateGroup(group, UNGROUPED);
+      }
+    }
+    else {
+      delete this.groups[UNGROUPED];
+      this.legendLeft.removeGroup(UNGROUPED);
+      this.legendRight.removeGroup(UNGROUPED);
+      this.yAxisLeft.removeGroup(UNGROUPED);
+      this.yAxisRight.removeGroup(UNGROUPED);
     }
-  };
 
-  /**
-   * Update the order of item in all groups
-   * @private
-   */
-  ItemSet.prototype._order = function() {
-    // reorder the items in all groups
-    // TODO: optimization: only reorder groups affected by the changed items
-    util.forEach(this.groups, function (group) {
-      group.order();
-    });
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
   };
 
-  /**
-   * Handle updated groups
-   * @param {Number[]} ids
-   * @private
-   */
-  ItemSet.prototype._onUpdateGroups = function(ids) {
-    this._onAddGroups(ids);
-  };
 
   /**
-   * Handle changed groups (added or updated)
-   * @param {Number[]} ids
-   * @private
+   * Redraw the component, mandatory function
+   * @return {boolean} Returns true if the component is resized
    */
-  ItemSet.prototype._onAddGroups = function(ids) {
-    var me = this;
+  LineGraph.prototype.redraw = function(forceGraphUpdate) {
+    var resized = false;
 
-    ids.forEach(function (id) {
-      var groupData = me.groupsData.get(id);
-      var group = me.groups[id];
+    // calculate actual size and position
+    this.props.width = this.dom.frame.offsetWidth;
+    this.props.height = this.body.domProps.centerContainer.height;
 
-      if (!group) {
-        // check for reserved ids
-        if (id == UNGROUPED || id == BACKGROUND) {
-          throw new Error('Illegal group id. ' + id + ' is a reserved id.');
-        }
+    // update the graph if there is no lastWidth or with, used for the initial draw
+    if (this.lastWidth === undefined && this.props.width) {
+      forceGraphUpdate = true;
+    }
 
-        var groupOptions = Object.create(me.options);
-        util.extend(groupOptions, {
-          height: null
-        });
+    // check if this component is resized
+    resized = this._isResized() || resized;
 
-        group = new Group(id, groupData, me);
-        me.groups[id] = group;
+    // check whether zoomed (in that case we need to re-stack everything)
+    var visibleInterval = this.body.range.end - this.body.range.start;
+    var zoomed = (visibleInterval != this.lastVisibleInterval);
+    this.lastVisibleInterval = visibleInterval;
 
-        // add items with this groupId to the new group
-        for (var itemId in me.items) {
-          if (me.items.hasOwnProperty(itemId)) {
-            var item = me.items[itemId];
-            if (item.data.group == id) {
-              group.add(item);
-            }
-          }
-        }
 
-        group.order();
-        group.show();
+    // the svg element is three times as big as the width, this allows for fully dragging left and right
+    // without reloading the graph. the controls for this are bound to events in the constructor
+    if (resized == true) {
+      this.svg.style.width = util.option.asSize(3*this.props.width);
+      this.svg.style.left = util.option.asSize(-this.props.width);
+
+      // if the height of the graph is set as proportional, change the height of the svg
+      if ((this.options.height + '').indexOf("%") != -1 || this.updateSVGheightOnResize == true) {
+        this.updateSVGheight = true;
       }
-      else {
-        // update group
-        group.setData(groupData);
+    }
+
+    // update the height of the graph on each redraw of the graph.
+    if (this.updateSVGheight == true) {
+      if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
+        this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
+        this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
       }
-    });
+      this.updateSVGheight = false;
+    }
+    else {
+      this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+    }
 
-    this.body.emitter.emit('change', {queue: true});
+    // zoomed is here to ensure that animations are shown correctly.
+    if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
+      resized = this._updateGraph() || resized;
+    }
+    else {
+      // move the whole svg while dragging
+      if (this.lastStart != 0) {
+        var offset = this.body.range.start - this.lastStart;
+        var range = this.body.range.end - this.body.range.start;
+        if (this.props.width != 0) {
+          var rangePerPixelInv = this.props.width/range;
+          var xOffset = offset * rangePerPixelInv;
+          this.svg.style.left = (-this.props.width - xOffset) + 'px';
+        }
+      }
+    }
+
+    this.legendLeft.redraw();
+    this.legendRight.redraw();
+    return resized;
   };
 
+
   /**
-   * Handle removed groups
-   * @param {Number[]} ids
-   * @private
+   * Update and redraw the graph.
+   *
    */
-  ItemSet.prototype._onRemoveGroups = function(ids) {
-    var groups = this.groups;
-    ids.forEach(function (id) {
-      var group = groups[id];
+  LineGraph.prototype._updateGraph = function () {
+    // reset the svg elements
+    DOMutil.prepareElements(this.svgElements);
+    if (this.props.width != 0 && this.itemsData != null) {
+      var group, i;
+      var preprocessedGroupData = {};
+      var processedGroupData = {};
+      var groupRanges = {};
+      var changeCalled = false;
 
-      if (group) {
-        group.hide();
-        delete groups[id];
+      // getting group Ids
+      var groupIds = [];
+      for (var groupId in this.groups) {
+        if (this.groups.hasOwnProperty(groupId)) {
+          group = this.groups[groupId];
+          if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
+            groupIds.push(groupId);
+          }
+        }
       }
-    });
+      if (groupIds.length > 0) {
+        // this is the range of the SVG canvas
+        var minDate = this.body.util.toGlobalTime(-this.body.domProps.root.width);
+        var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
+        var groupsData = {};
+        // fill groups data, this only loads the data we require based on the timewindow
+        this._getRelevantData(groupIds, groupsData, minDate, maxDate);
 
-    this.markDirty();
+        // apply sampling, if disabled, it will pass through this function.
+        this._applySampling(groupIds, groupsData);
 
-    this.body.emitter.emit('change', {queue: true});
-  };
+        // we transform the X coordinates to detect collisions
+        for (i = 0; i < groupIds.length; i++) {
+          preprocessedGroupData[groupIds[i]] = this._convertXcoordinates(groupsData[groupIds[i]]);
+        }
 
-  /**
-   * Reorder the groups if needed
-   * @return {boolean} changed
-   * @private
-   */
-  ItemSet.prototype._orderGroups = function () {
-    if (this.groupsData) {
-      // reorder the groups
-      var groupIds = this.groupsData.getIds({
-        order: this.options.groupOrder
-      });
+        // now all needed data has been collected we start the processing.
+        this._getYRanges(groupIds, preprocessedGroupData, groupRanges);
 
-      var changed = !util.equalArray(groupIds, this.groupIds);
-      if (changed) {
-        // hide all groups, removes them from the DOM
-        var groups = this.groups;
-        groupIds.forEach(function (groupId) {
-          groups[groupId].hide();
-        });
+        // update the Y axis first, we use this data to draw at the correct Y points
+        // changeCalled is required to clean the SVG on a change emit.
+        changeCalled = this._updateYAxis(groupIds, groupRanges);
+        var MAX_CYCLES = 5;
+        if (changeCalled == true && this.COUNTER < MAX_CYCLES) {
+          DOMutil.cleanupElements(this.svgElements);
+          this.abortedGraphUpdate = true;
+          this.COUNTER++;
+          this.body.emitter.emit('change');
+          return true;
+        }
+        else {
+          if (this.COUNTER > MAX_CYCLES) {
+            console.log("WARNING: there may be an infinite loop in the _updateGraph emitter cycle.")
+          }
+          this.COUNTER = 0;
+          this.abortedGraphUpdate = false;
 
-        // show the groups again, attach them to the DOM in correct order
-        groupIds.forEach(function (groupId) {
-          groups[groupId].show();
-        });
+          // With the yAxis scaled correctly, use this to get the Y values of the points.
+          for (i = 0; i < groupIds.length; i++) {
+            group = this.groups[groupIds[i]];
+            processedGroupData[groupIds[i]] = this._convertYcoordinates(groupsData[groupIds[i]], group);
+          }
 
-        this.groupIds = groupIds;
+          // draw the groups
+          for (i = 0; i < groupIds.length; i++) {
+            group = this.groups[groupIds[i]];
+            if (group.options.style != 'bar') { // bar needs to be drawn enmasse
+              group.draw(processedGroupData[groupIds[i]], group, this.framework);
+            }
+          }
+          BarGraphFunctions.draw(groupIds, processedGroupData, this.framework);
+        }
       }
-
-      return changed;
-    }
-    else {
-      return false;
     }
-  };
-
-  /**
-   * Add a new item
-   * @param {Item} item
-   * @private
-   */
-  ItemSet.prototype._addItem = function(item) {
-    this.items[item.id] = item;
 
-    // add to group
-    var groupId = this._getGroupId(item.data);
-    var group = this.groups[groupId];
-    if (group) group.add(item);
+    // cleanup unused svg elements
+    DOMutil.cleanupElements(this.svgElements);
+    return false;
   };
 
+
   /**
-   * Update an existing item
-   * @param {Item} item
-   * @param {Object} itemData
+   * first select and preprocess the data from the datasets.
+   * the groups have their preselection of data, we now loop over this data to see
+   * what data we need to draw. Sorted data is much faster.
+   * more optimization is possible by doing the sampling before and using the binary search
+   * to find the end date to determine the increment.
+   *
+   * @param {array}  groupIds
+   * @param {object} groupsData
+   * @param {date}   minDate
+   * @param {date}   maxDate
    * @private
    */
-  ItemSet.prototype._updateItem = function(item, itemData) {
-    var oldGroupId = item.data.group;
-
-    // update the items data (will redraw the item when displayed)
-    item.setData(itemData);
-
-    // update group
-    if (oldGroupId != item.data.group) {
-      var oldGroup = this.groups[oldGroupId];
-      if (oldGroup) oldGroup.remove(item);
-
-      var groupId = this._getGroupId(item.data);
-      var group = this.groups[groupId];
-      if (group) group.add(item);
+  LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
+    var group, i, j, item;
+    if (groupIds.length > 0) {
+      for (i = 0; i < groupIds.length; i++) {
+        group = this.groups[groupIds[i]];
+        groupsData[groupIds[i]] = [];
+        var dataContainer = groupsData[groupIds[i]];
+        // optimization for sorted data
+        if (group.options.sort == true) {
+          var guess = Math.max(0, util.binarySearchValue(group.itemsData, minDate, 'x', 'before'));
+          for (j = guess; j < group.itemsData.length; j++) {
+            item = group.itemsData[j];
+            if (item !== undefined) {
+              if (item.x > maxDate) {
+                dataContainer.push(item);
+                break;
+              }
+              else {
+                dataContainer.push(item);
+              }
+            }
+          }
+        }
+        else {
+          for (j = 0; j < group.itemsData.length; j++) {
+            item = group.itemsData[j];
+            if (item !== undefined) {
+              if (item.x > minDate && item.x < maxDate) {
+                dataContainer.push(item);
+              }
+            }
+          }
+        }
+      }
     }
   };
 
+
   /**
-   * Delete an item from the ItemSet: remove it from the DOM, from the map
-   * with items, and from the map with visible items, and from the selection
-   * @param {Item} item
+   *
+   * @param groupIds
+   * @param groupsData
    * @private
    */
-  ItemSet.prototype._removeItem = function(item) {
-    // remove from DOM
-    item.hide();
-
-    // remove from items
-    delete this.items[item.id];
-
-    // remove from selection
-    var index = this.selection.indexOf(item.id);
-    if (index != -1) this.selection.splice(index, 1);
+  LineGraph.prototype._applySampling = function (groupIds, groupsData) {
+    var group;
+    if (groupIds.length > 0) {
+      for (var i = 0; i < groupIds.length; i++) {
+        group = this.groups[groupIds[i]];
+        if (group.options.sampling == true) {
+          var dataContainer = groupsData[groupIds[i]];
+          if (dataContainer.length > 0) {
+            var increment = 1;
+            var amountOfPoints = dataContainer.length;
 
-    // remove from group
-    item.parent && item.parent.remove(item);
-  };
+            // the global screen is used because changing the width of the yAxis may affect the increment, resulting in an endless loop
+            // of width changing of the yAxis.
+            var xDistance = this.body.util.toGlobalScreen(dataContainer[dataContainer.length - 1].x) - this.body.util.toGlobalScreen(dataContainer[0].x);
+            var pointsPerPixel = amountOfPoints / xDistance;
+            increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1, Math.round(pointsPerPixel)));
 
-  /**
-   * Create an array containing all items being a range (having an end date)
-   * @param array
-   * @returns {Array}
-   * @private
-   */
-  ItemSet.prototype._constructByEndArray = function(array) {
-    var endArray = [];
+            var sampledData = [];
+            for (var j = 0; j < amountOfPoints; j += increment) {
+              sampledData.push(dataContainer[j]);
 
-    for (var i = 0; i < array.length; i++) {
-      if (array[i] instanceof RangeItem) {
-        endArray.push(array[i]);
+            }
+            groupsData[groupIds[i]] = sampledData;
+          }
+        }
       }
     }
-    return endArray;
   };
 
+
   /**
-   * Register the clicked item on touch, before dragStart is initiated.
    *
-   * dragStart is initiated from a mousemove event, which can have left the item
-   * already resulting in an item == null
    *
-   * @param {Event} event
+   * @param {array}  groupIds
+   * @param {object} groupsData
+   * @param {object} groupRanges  | this is being filled here
    * @private
    */
-  ItemSet.prototype._onTouch = function (event) {
-    // store the touched item, used in _onDragStart
-    this.touchParams.item = ItemSet.itemFromTarget(event);
+  LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
+    var groupData, group, i;
+    var barCombinedDataLeft = [];
+    var barCombinedDataRight = [];
+    var options;
+    if (groupIds.length > 0) {
+      for (i = 0; i < groupIds.length; i++) {
+        groupData = groupsData[groupIds[i]];
+        options = this.groups[groupIds[i]].options;
+        if (groupData.length > 0) {
+          group = this.groups[groupIds[i]];
+          // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
+          if (options.barChart.handleOverlap == 'stack' && options.style == 'bar') {
+            if (options.yAxisOrientation == 'left') {barCombinedDataLeft  = barCombinedDataLeft.concat(group.getYRange(groupData)) ;}
+            else                                    {barCombinedDataRight = barCombinedDataRight.concat(group.getYRange(groupData));}
+          }
+          else {
+            groupRanges[groupIds[i]] = group.getYRange(groupData,groupIds[i]);
+          }
+        }
+      }
+
+      // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
+      BarGraphFunctions.getStackedBarYRange(barCombinedDataLeft , groupRanges, groupIds, '__barchartLeft' , 'left' );
+      BarGraphFunctions.getStackedBarYRange(barCombinedDataRight, groupRanges, groupIds, '__barchartRight', 'right');
+    }
   };
 
+
   /**
-   * Start dragging the selected events
-   * @param {Event} event
+   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
+   * @param {Array} groupIds
+   * @param {Object} groupRanges
    * @private
    */
-  ItemSet.prototype._onDragStart = function (event) {
-    if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
-      return;
-    }
-
-    var item = this.touchParams.item || null;
-    var me = this;
-    var props;
-
-    if (item && item.selected) {
-      var dragLeftItem = event.target.dragLeftItem;
-      var dragRightItem = event.target.dragRightItem;
-
-      if (dragLeftItem) {
-        props = {
-          item: dragLeftItem,
-          initialX: event.gesture.center.clientX
-        };
-
-        if (me.options.editable.updateTime) {
-          props.start = item.data.start.valueOf();
+  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
+    var resized = false;
+    var yAxisLeftUsed = false;
+    var yAxisRightUsed = false;
+    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
+    // if groups are present
+    if (groupIds.length > 0) {
+      // this is here to make sure that if there are no items in the axis but there are groups, that there is no infinite draw/redraw loop.
+      for (var i = 0; i < groupIds.length; i++) {
+        var group = this.groups[groupIds[i]];
+        if (group && group.options.yAxisOrientation != 'right') {
+          yAxisLeftUsed = true;
+          minLeft = 0;
+          maxLeft = 0;
         }
-        if (me.options.editable.updateGroup) {
-          if ('group' in item.data) props.group = item.data.group;
+        else if (group && group.options.yAxisOrientation) {
+          yAxisRightUsed = true;
+          minRight = 0;
+          maxRight = 0;
         }
-
-        this.touchParams.itemProps = [props];
       }
-      else if (dragRightItem) {
-        props = {
-          item: dragRightItem,
-          initialX: event.gesture.center.clientX
-        };
 
-        if (me.options.editable.updateTime) {
-          props.end = item.data.end.valueOf();
-        }
-        if (me.options.editable.updateGroup) {
-          if ('group' in item.data) props.group = item.data.group;
-        }
-
-        this.touchParams.itemProps = [props];
-      }
-      else {
-        this.touchParams.itemProps = this.getSelection().map(function (id) {
-          var item = me.items[id];
-          var props = {
-            item: item,
-            initialX: event.gesture.center.clientX
-          };
+      // if there are items:
+      for (var i = 0; i < groupIds.length; i++) {
+        if (groupRanges.hasOwnProperty(groupIds[i])) {
+          if (groupRanges[groupIds[i]].ignore !== true) {
+            minVal = groupRanges[groupIds[i]].min;
+            maxVal = groupRanges[groupIds[i]].max;
 
-          if (me.options.editable.updateTime) {
-            if ('start' in item.data) props.start = item.data.start.valueOf();
-            if ('end' in item.data)   props.end = item.data.end.valueOf();
-          }
-          if (me.options.editable.updateGroup) {
-            if ('group' in item.data) props.group = item.data.group;
+            if (groupRanges[groupIds[i]].yAxisOrientation != 'right') {
+              yAxisLeftUsed = true;
+              minLeft = minLeft > minVal ? minVal : minLeft;
+              maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
+            }
+            else {
+              yAxisRightUsed = true;
+              minRight = minRight > minVal ? minVal : minRight;
+              maxRight = maxRight < maxVal ? maxVal : maxRight;
+            }
           }
-
-          return props;
-        });
+        }
       }
 
-      event.stopPropagation();
+      if (yAxisLeftUsed == true) {
+        this.yAxisLeft.setRange(minLeft, maxLeft);
+      }
+      if (yAxisRightUsed == true) {
+        this.yAxisRight.setRange(minRight, maxRight);
+      }
     }
-  };
-
-  /**
-   * Drag selected items
-   * @param {Event} event
-   * @private
-   */
-  ItemSet.prototype._onDrag = function (event) {
-    event.preventDefault()
-
-    if (this.touchParams.itemProps) {
-      var me = this;
-      var snap = this.body.util.snap || null;
-      var xOffset = this.body.dom.root.offsetLeft + this.body.domProps.left.width;
-
-      // move
-      this.touchParams.itemProps.forEach(function (props) {
-        var newProps = {};
-        var current = me.body.util.toTime(event.gesture.center.clientX - xOffset);
-        var initial = me.body.util.toTime(props.initialX - xOffset);
-        var offset = current - initial;
-
-        if ('start' in props) {
-          var start = new Date(props.start + offset);
-          newProps.start = snap ? snap(start) : start;
-        }
-
-        if ('end' in props) {
-          var end = new Date(props.end + offset);
-          newProps.end = snap ? snap(end) : end;
-        }
-
-        if ('group' in props) {
-          // drag from one group to another
-          var group = ItemSet.groupFromTarget(event);
-          newProps.group = group && group.groupId;
-        }
+    resized = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || resized;
+    resized = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || resized;
 
-        // confirm moving the item
-        var itemData = util.extend({}, props.item.data, newProps);
-        me.options.onMoving(itemData, function (itemData) {
-          if (itemData) {
-            me._updateItemProps(props.item, itemData);
-          }
-        });
-      });
+    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
+      this.yAxisLeft.drawIcons = true;
+      this.yAxisRight.drawIcons = true;
+    }
+    else {
+      this.yAxisLeft.drawIcons = false;
+      this.yAxisRight.drawIcons = false;
+    }
+    this.yAxisRight.master = !yAxisLeftUsed;
+    if (this.yAxisRight.master == false) {
+      if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
+      else                        {this.yAxisLeft.lineOffset = 0;}
 
-      this.stackDirty = true; // force re-stacking of all items next redraw
-      this.body.emitter.emit('change');
+      resized = this.yAxisLeft.redraw() || resized;
+      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+      this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
+      resized = this.yAxisRight.redraw() || resized;
+    }
+    else {
+      resized = this.yAxisRight.redraw() || resized;
+    }
 
-      event.stopPropagation();
+    // clean the accumulated lists
+    if (groupIds.indexOf('__barchartLeft') != -1) {
+      groupIds.splice(groupIds.indexOf('__barchartLeft'),1);
+    }
+    if (groupIds.indexOf('__barchartRight') != -1) {
+      groupIds.splice(groupIds.indexOf('__barchartRight'),1);
     }
+
+    return resized;
   };
 
+
   /**
-   * Update an items properties
-   * @param {Item} item
-   * @param {Object} props  Can contain properties start, end, and group.
+   * This shows or hides the Y axis if needed. If there is a change, the changed event is emitted by the updateYAxis function
+   *
+   * @param {boolean} axisUsed
+   * @returns {boolean}
    * @private
+   * @param axis
    */
-  ItemSet.prototype._updateItemProps = function(item, props) {
-    // TODO: copy all properties from props to item? (also new ones)
-    if ('start' in props) item.data.start = props.start;
-    if ('end' in props)   item.data.end   = props.end;
-    if ('group' in props && item.data.group != props.group) {
-      this._moveToGroup(item, props.group)
+  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
+    var changed = false;
+    if (axisUsed == false) {
+      if (axis.dom.frame.parentNode && axis.hidden == false) {
+        axis.hide()
+        changed = true;
+      }
+    }
+    else {
+      if (!axis.dom.frame.parentNode && axis.hidden == true) {
+        axis.show();
+        changed = true;
+      }
     }
+    return changed;
   };
 
+
   /**
-   * Move an item to another group
-   * @param {Item} item
-   * @param {String | Number} groupId
+   * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
+   * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
+   * the yAxis.
+   *
+   * @param datapoints
+   * @returns {Array}
    * @private
    */
-  ItemSet.prototype._moveToGroup = function(item, groupId) {
-    var group = this.groups[groupId];
-    if (group && group.groupId != item.data.group) {
-      var oldGroup = item.parent;
-      oldGroup.remove(item);
-      oldGroup.order();
-      group.add(item);
-      group.order();
+  LineGraph.prototype._convertXcoordinates = function (datapoints) {
+    var extractedData = [];
+    var xValue, yValue;
+    var toScreen = this.body.util.toScreen;
 
-      item.data.group = group.groupId;
+    for (var i = 0; i < datapoints.length; i++) {
+      xValue = toScreen(datapoints[i].x) + this.props.width;
+      yValue = datapoints[i].y;
+      extractedData.push({x: xValue, y: yValue});
     }
+
+    return extractedData;
   };
 
+
   /**
-   * End of dragging selected items
-   * @param {Event} event
+   * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
+   * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
+   * the yAxis.
+   *
+   * @param datapoints
+   * @param group
+   * @returns {Array}
    * @private
    */
-  ItemSet.prototype._onDragEnd = function (event) {
-    event.preventDefault()
+  LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
+    var extractedData = [];
+    var xValue, yValue;
+    var toScreen = this.body.util.toScreen;
+    var axis = this.yAxisLeft;
+    var svgHeight = Number(this.svg.style.height.replace('px',''));
+    if (group.options.yAxisOrientation == 'right') {
+      axis = this.yAxisRight;
+    }
 
-    if (this.touchParams.itemProps) {
-      // prepare a change set for the changed items
-      var changes = [],
-          me = this,
-          dataset = this.itemsData.getDataSet();
+    for (var i = 0; i < datapoints.length; i++) {
+      xValue = toScreen(datapoints[i].x) + this.props.width;
+      yValue = Math.round(axis.convertValue(datapoints[i].y));
+      extractedData.push({x: xValue, y: yValue});
+    }
 
-      var itemProps = this.touchParams.itemProps ;
-      this.touchParams.itemProps = null;
-      itemProps.forEach(function (props) {
-        var id = props.item.id,
-            itemData = me.itemsData.get(id, me.itemOptions);
+    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
 
-        var changed = false;
-        if ('start' in props.item.data) {
-          changed = (props.start != props.item.data.start.valueOf());
-          itemData.start = util.convert(props.item.data.start,
-                  dataset._options.type && dataset._options.type.start || 'Date');
-        }
-        if ('end' in props.item.data) {
-          changed = changed  || (props.end != props.item.data.end.valueOf());
-          itemData.end = util.convert(props.item.data.end,
-                  dataset._options.type && dataset._options.type.end || 'Date');
-        }
-        if ('group' in props.item.data) {
-          changed = changed  || (props.group != props.item.data.group);
-          itemData.group = props.item.data.group;
-        }
+    return extractedData;
+  };
 
-        // only apply changes when start or end is actually changed
-        if (changed) {
-          me.options.onMove(itemData, function (itemData) {
-            if (itemData) {
-              // apply changes
-              itemData[dataset._fieldId] = id; // ensure the item contains its id (can be undefined)
-              changes.push(itemData);
-            }
-            else {
-              // restore original values
-              me._updateItemProps(props.item, props);
 
-              me.stackDirty = true; // force re-stacking of all items next redraw
-              me.body.emitter.emit('change');
-            }
-          });
-        }
-      });
+  module.exports = LineGraph;
 
-      // apply the changes to the data (if there are changes)
-      if (changes.length) {
-        dataset.update(changes);
-      }
 
-      event.stopPropagation();
-    }
-  };
+/***/ },
+/* 30 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var util = __webpack_require__(1);
+  var Component = __webpack_require__(20);
+  var TimeStep = __webpack_require__(19);
+  var DateUtil = __webpack_require__(15);
+  var moment = __webpack_require__(44);
 
   /**
-   * Handle selecting/deselecting an item when tapping it
-   * @param {Event} event
-   * @private
+   * A horizontal time axis
+   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
+   * @param {Object} [options]        See TimeAxis.setOptions for the available
+   *                                  options.
+   * @constructor TimeAxis
+   * @extends Component
    */
-  ItemSet.prototype._onSelectItem = function (event) {
-    if (!this.options.selectable) return;
+  function TimeAxis (body, options) {
+    this.dom = {
+      foreground: null,
+      lines: [],
+      majorTexts: [],
+      minorTexts: [],
+      redundant: {
+        lines: [],
+        majorTexts: [],
+        minorTexts: []
+      }
+    };
+    this.props = {
+      range: {
+        start: 0,
+        end: 0,
+        minimumStep: 0
+      },
+      lineTop: 0
+    };
 
-    var ctrlKey  = event.gesture.srcEvent && event.gesture.srcEvent.ctrlKey;
-    var shiftKey = event.gesture.srcEvent && event.gesture.srcEvent.shiftKey;
-    if (ctrlKey || shiftKey) {
-      this._onMultiSelectItem(event);
-      return;
-    }
+    this.defaultOptions = {
+      orientation: 'bottom',  // supported: 'top', 'bottom'
+      // TODO: implement timeaxis orientations 'left' and 'right'
+      showMinorLabels: true,
+      showMajorLabels: true,
+      format: null,
+      timeAxis: null
+    };
+    this.options = util.extend({}, this.defaultOptions);
 
-    var oldSelection = this.getSelection();
+    this.body = body;
 
-    var item = ItemSet.itemFromTarget(event);
-    var selection = item ? [item.id] : [];
-    this.setSelection(selection);
+    // create the HTML DOM
+    this._create();
 
-    var newSelection = this.getSelection();
+    this.setOptions(options);
+  }
 
-    // emit a select event,
-    // except when old selection is empty and new selection is still empty
-    if (newSelection.length > 0 || oldSelection.length > 0) {
-      this.body.emitter.emit('select', {
-        items: newSelection
-      });
-    }
-  };
+  TimeAxis.prototype = new Component();
 
   /**
-   * Handle creation and updates of an item on double tap
-   * @param event
-   * @private
+   * Set options for the TimeAxis.
+   * Parameters will be merged in current options.
+   * @param {Object} options  Available options:
+   *                          {string} [orientation]
+   *                          {boolean} [showMinorLabels]
+   *                          {boolean} [showMajorLabels]
    */
-  ItemSet.prototype._onAddItem = function (event) {
-    if (!this.options.selectable) return;
-    if (!this.options.editable.add) return;
-
-    var me = this,
-        snap = this.body.util.snap || null,
-        item = ItemSet.itemFromTarget(event);
-
-    if (item) {
-      // update item
+  TimeAxis.prototype.setOptions = function(options) {
+    if (options) {
+      // copy all options that we know
+      util.selectiveExtend([
+        'orientation',
+        'showMinorLabels',
+        'showMajorLabels',
+        'hiddenDates',
+        'format',
+        'timeAxis'
+      ], this.options, options);
 
-      // execute async handler to update the item (or cancel it)
-      var itemData = me.itemsData.get(item.id); // get a clone of the data from the dataset
-      this.options.onUpdate(itemData, function (itemData) {
-        if (itemData) {
-          me.itemsData.getDataSet().update(itemData);
+      // apply locale to moment.js
+      // TODO: not so nice, this is applied globally to moment.js
+      if ('locale' in options) {
+        if (typeof moment.locale === 'function') {
+          // moment.js 2.8.1+
+          moment.locale(options.locale);
+        }
+        else {
+          moment.lang(options.locale);
         }
-      });
-    }
-    else {
-      // add item
-      var xAbs = util.getAbsoluteLeft(this.dom.frame);
-      var x = event.gesture.center.pageX - xAbs;
-      var start = this.body.util.toTime(x);
-      var newItem = {
-        start: snap ? snap(start) : start,
-        content: 'new item'
-      };
-
-      // when default type is a range, add a default end date to the new item
-      if (this.options.type === 'range') {
-        var end = this.body.util.toTime(x + this.props.width / 5);
-        newItem.end = snap ? snap(end) : end;
       }
+    }
+  };
 
-      newItem[this.itemsData._fieldId] = util.randomUUID();
+  /**
+   * Create the HTML DOM for the TimeAxis
+   */
+  TimeAxis.prototype._create = function() {
+    this.dom.foreground = document.createElement('div');
+    this.dom.background = document.createElement('div');
 
-      var group = ItemSet.groupFromTarget(event);
-      if (group) {
-        newItem.group = group.groupId;
-      }
+    this.dom.foreground.className = 'timeaxis foreground';
+    this.dom.background.className = 'timeaxis background';
+  };
 
-      // execute async handler to customize (or cancel) adding an item
-      this.options.onAdd(newItem, function (item) {
-        if (item) {
-          me.itemsData.getDataSet().add(item);
-          // TODO: need to trigger a redraw?
-        }
-      });
+  /**
+   * Destroy the TimeAxis
+   */
+  TimeAxis.prototype.destroy = function() {
+    // remove from DOM
+    if (this.dom.foreground.parentNode) {
+      this.dom.foreground.parentNode.removeChild(this.dom.foreground);
+    }
+    if (this.dom.background.parentNode) {
+      this.dom.background.parentNode.removeChild(this.dom.background);
     }
+
+    this.body = null;
   };
 
   /**
-   * Handle selecting/deselecting multiple items when holding an item
-   * @param {Event} event
-   * @private
+   * Repaint the component
+   * @return {boolean} Returns true if the component is resized
    */
-  ItemSet.prototype._onMultiSelectItem = function (event) {
-    if (!this.options.selectable) return;
+  TimeAxis.prototype.redraw = function () {
+    var options = this.options;
+    var props = this.props;
+    var foreground = this.dom.foreground;
+    var background = this.dom.background;
 
-    var selection,
-        item = ItemSet.itemFromTarget(event);
+    // determine the correct parent DOM element (depending on option orientation)
+    var parent = (options.orientation == 'top') ? this.body.dom.top : this.body.dom.bottom;
+    var parentChanged = (foreground.parentNode !== parent);
 
-    if (item) {
-      // multi select items
-      selection = this.getSelection(); // current selection
+    // calculate character width and height
+    this._calculateCharSize();
 
-      var shiftKey = event.gesture.touches[0] && event.gesture.touches[0].shiftKey || false;
-      if (shiftKey) {
-        // select all items between the old selection and the tapped item
+    // TODO: recalculate sizes only needed when parent is resized or options is changed
+    var orientation = this.options.orientation,
+        showMinorLabels = this.options.showMinorLabels,
+        showMajorLabels = this.options.showMajorLabels;
 
-        // determine the selection range
-        selection.push(item.id);
-        var range = ItemSet._getItemRange(this.itemsData.get(selection, this.itemOptions));
+    // determine the width and height of the elemens for the axis
+    props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+    props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+    props.height = props.minorLabelHeight + props.majorLabelHeight;
+    props.width = foreground.offsetWidth;
 
-        // select all items within the selection range
-        selection = [];
-        for (var id in this.items) {
-          if (this.items.hasOwnProperty(id)) {
-            var _item = this.items[id];
-            var start = _item.data.start;
-            var end = (_item.data.end !== undefined) ? _item.data.end : start;
+    props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
+        (options.orientation == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
+    props.minorLineWidth = 1; // TODO: really calculate width
+    props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
+    props.majorLineWidth = 1; // TODO: really calculate width
 
-            if (start >= range.min && end <= range.max) {
-              selection.push(_item.id); // do not use id but item.id, id itself is stringified
-            }
-          }
-        }
-      }
-      else {
-        // add/remove this item from the current selection
-        var index = selection.indexOf(item.id);
-        if (index == -1) {
-          // item is not yet selected -> select it
-          selection.push(item.id);
-        }
-        else {
-          // item is already selected -> deselect it
-          selection.splice(index, 1);
-        }
-      }
+    //  take foreground and background offline while updating (is almost twice as fast)
+    var foregroundNextSibling = foreground.nextSibling;
+    var backgroundNextSibling = background.nextSibling;
+    foreground.parentNode && foreground.parentNode.removeChild(foreground);
+    background.parentNode && background.parentNode.removeChild(background);
 
-      this.setSelection(selection);
+    foreground.style.height = this.props.height + 'px';
 
-      this.body.emitter.emit('select', {
-        items: this.getSelection()
-      });
-    }
-  };
+    this._repaintLabels();
+
+    // put DOM online again (at the same place)
+    if (foregroundNextSibling) {
+      parent.insertBefore(foreground, foregroundNextSibling);
+    }
+    else {
+      parent.appendChild(foreground)
+    }
+    if (backgroundNextSibling) {
+      this.body.dom.backgroundVertical.insertBefore(background, backgroundNextSibling);
+    }
+    else {
+      this.body.dom.backgroundVertical.appendChild(background)
+    }
+
+    return this._isResized() || parentChanged;
+  };
 
   /**
-   * Calculate the time range of a list of items
-   * @param {Array.<Object>} itemsData
-   * @return {{min: Date, max: Date}} Returns the range of the provided items
+   * Repaint major and minor text labels and vertical grid lines
    * @private
    */
-  ItemSet._getItemRange = function(itemsData) {
-    var max = null;
-    var min = null;
+  TimeAxis.prototype._repaintLabels = function () {
+    var orientation = this.options.orientation;
 
-    itemsData.forEach(function (data) {
-      if (min == null || data.start < min) {
-        min = data.start;
+    // calculate range and step (step such that we have space for 7 characters per label)
+    var start = util.convert(this.body.range.start, 'Number');
+    var end = util.convert(this.body.range.end, 'Number');
+    var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf();
+    var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.body.hiddenDates, this.body.range, timeLabelsize);
+    minimumStep -= this.body.util.toTime(0).valueOf();
+
+    var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.body.hiddenDates);
+    if (this.options.format) {
+      step.setFormat(this.options.format);
+    }
+    if (this.options.timeAxis) {
+      step.setScale(this.options.timeAxis);
+    }
+    this.step = step;
+
+    // Move all DOM elements to a "redundant" list, where they
+    // can be picked for re-use, and clear the lists with lines and texts.
+    // At the end of the function _repaintLabels, left over elements will be cleaned up
+    var dom = this.dom;
+    dom.redundant.lines = dom.lines;
+    dom.redundant.majorTexts = dom.majorTexts;
+    dom.redundant.minorTexts = dom.minorTexts;
+    dom.lines = [];
+    dom.majorTexts = [];
+    dom.minorTexts = [];
+
+    var cur;
+    var x = 0;
+    var isMajor;
+    var xPrev = 0;
+    var width = 0;
+    var prevLine;
+    var xFirstMajorLabel = undefined;
+    var max = 0;
+    var className;
+
+    step.first();
+    while (step.hasNext() && max < 1000) {
+      max++;
+
+      cur = step.getCurrent();
+      isMajor = step.isMajor();
+      className = step.getClassName();
+
+      xPrev = x;
+      x = this.body.util.toScreen(cur);
+      width = x - xPrev;
+      if (prevLine) {
+        prevLine.style.width = width + 'px';
       }
 
-      if (data.end != undefined) {
-        if (max == null || data.end > max) {
-          max = data.end;
+      if (this.options.showMinorLabels) {
+        this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
+      }
+
+      if (isMajor && this.options.showMajorLabels) {
+        if (x > 0) {
+          if (xFirstMajorLabel == undefined) {
+            xFirstMajorLabel = x;
+          }
+          this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
         }
+        prevLine = this._repaintMajorLine(x, orientation, className);
       }
       else {
-        if (max == null || data.start > max) {
-          max = data.start;
+        prevLine = this._repaintMinorLine(x, orientation, className);
+      }
+
+      step.next();
+    }
+
+    // create a major label on the left when needed
+    if (this.options.showMajorLabels) {
+      var leftTime = this.body.util.toTime(0),
+          leftText = step.getLabelMajor(leftTime),
+          widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
+
+      if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
+        this._repaintMajorText(0, leftText, orientation, className);
+      }
+    }
+
+    // Cleanup leftover DOM elements from the redundant list
+    util.forEach(this.dom.redundant, function (arr) {
+      while (arr.length) {
+        var elem = arr.pop();
+        if (elem && elem.parentNode) {
+          elem.parentNode.removeChild(elem);
         }
       }
     });
+  };
 
-    return {
-      min: min,
-      max: max
+  /**
+   * Create a minor label for the axis at position x
+   * @param {Number} x
+   * @param {String} text
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @param {String} className
+   * @private
+   */
+  TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
+    // reuse redundant label
+    var label = this.dom.redundant.minorTexts.shift();
+
+    if (!label) {
+      // create new label
+      var content = document.createTextNode('');
+      label = document.createElement('div');
+      label.appendChild(content);
+      this.dom.foreground.appendChild(label);
     }
+    this.dom.minorTexts.push(label);
+
+    label.childNodes[0].nodeValue = text;
+
+    label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
+    label.style.left = x + 'px';
+    label.className = 'text minor ' + className;
+    //label.title = title;  // TODO: this is a heavy operation
   };
 
   /**
-   * Find an item from an event target:
-   * searches for the attribute 'timeline-item' in the event target's element tree
-   * @param {Event} event
-   * @return {Item | null} item
+   * Create a Major label for the axis at position x
+   * @param {Number} x
+   * @param {String} text
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @param {String} className
+   * @private
    */
-  ItemSet.itemFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-item')) {
-        return target['timeline-item'];
-      }
-      target = target.parentNode;
+  TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className) {
+    // reuse redundant label
+    var label = this.dom.redundant.majorTexts.shift();
+
+    if (!label) {
+      // create label
+      var content = document.createTextNode(text);
+      label = document.createElement('div');
+      label.appendChild(content);
+      this.dom.foreground.appendChild(label);
     }
+    this.dom.majorTexts.push(label);
 
-    return null;
+    label.childNodes[0].nodeValue = text;
+    label.className = 'text major ' + className;
+    //label.title = title; // TODO: this is a heavy operation
+
+    label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
+    label.style.left = x + 'px';
   };
 
   /**
-   * Find the Group from an event target:
-   * searches for the attribute 'timeline-group' in the event target's element tree
-   * @param {Event} event
-   * @return {Group | null} group
+   * Create a minor line for the axis at position x
+   * @param {Number} x
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @param {String} className
+   * @return {Element} Returns the created line
+   * @private
    */
-  ItemSet.groupFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-group')) {
-        return target['timeline-group'];
-      }
-      target = target.parentNode;
+  TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
+    // reuse redundant line
+    var line = this.dom.redundant.lines.shift();
+    if (!line) {
+      // create vertical line
+      line = document.createElement('div');
+      this.dom.background.appendChild(line);
+    }
+    this.dom.lines.push(line);
+
+    var props = this.props;
+    if (orientation == 'top') {
+      line.style.top = props.majorLabelHeight + 'px';
+    }
+    else {
+      line.style.top = this.body.domProps.top.height + 'px';
     }
+    line.style.height = props.minorLineHeight + 'px';
+    line.style.left = (x - props.minorLineWidth / 2) + 'px';
 
-    return null;
+    line.className = 'grid vertical minor ' + className;
+
+    return line;
   };
 
   /**
-   * Find the ItemSet from an event target:
-   * searches for the attribute 'timeline-itemset' in the event target's element tree
-   * @param {Event} event
-   * @return {ItemSet | null} item
+   * Create a Major line for the axis at position x
+   * @param {Number} x
+   * @param {String} orientation   "top" or "bottom" (default)
+   * @param {String} className
+   * @return {Element} Returns the created line
+   * @private
    */
-  ItemSet.itemSetFromTarget = function(event) {
-    var target = event.target;
-    while (target) {
-      if (target.hasOwnProperty('timeline-itemset')) {
-        return target['timeline-itemset'];
-      }
-      target = target.parentNode;
+  TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
+    // reuse redundant line
+    var line = this.dom.redundant.lines.shift();
+    if (!line) {
+      // create vertical line
+      line = document.createElement('div');
+      this.dom.background.appendChild(line);
     }
+    this.dom.lines.push(line);
 
-    return null;
+    var props = this.props;
+    if (orientation == 'top') {
+      line.style.top = '0';
+    }
+    else {
+      line.style.top = this.body.domProps.top.height + 'px';
+    }
+    line.style.left = (x - props.majorLineWidth / 2) + 'px';
+    line.style.height = props.majorLineHeight + 'px';
+
+    line.className = 'grid vertical major ' + className;
+
+    return line;
   };
 
-  module.exports = ItemSet;
+  /**
+   * Determine the size of text on the axis (both major and minor axis).
+   * The size is calculated only once and then cached in this.props.
+   * @private
+   */
+  TimeAxis.prototype._calculateCharSize = function () {
+    // Note: We calculate char size with every redraw. Size may change, for
+    // example when any of the timelines parents had display:none for example.
+
+    // determine the char width and height on the minor axis
+    if (!this.dom.measureCharMinor) {
+      this.dom.measureCharMinor = document.createElement('DIV');
+      this.dom.measureCharMinor.className = 'text minor measure';
+      this.dom.measureCharMinor.style.position = 'absolute';
+
+      this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
+      this.dom.foreground.appendChild(this.dom.measureCharMinor);
+    }
+    this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight;
+    this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth;
+
+    // determine the char width and height on the major axis
+    if (!this.dom.measureCharMajor) {
+      this.dom.measureCharMajor = document.createElement('DIV');
+      this.dom.measureCharMajor.className = 'text major measure';
+      this.dom.measureCharMajor.style.position = 'absolute';
+
+      this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
+      this.dom.foreground.appendChild(this.dom.measureCharMajor);
+    }
+    this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight;
+    this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
+  };
+
+  /**
+   * Snap a date to a rounded value.
+   * The snap intervals are dependent on the current scale and step.
+   * @param {Date} date   the date to be snapped.
+   * @return {Date} snappedDate
+   */
+  TimeAxis.prototype.snap = function(date) {
+    return this.step.snap(date);
+  };
+
+  module.exports = TimeAxis;
 
 
 /***/ },
-/* 33 */
+/* 31 */
 /***/ function(module, exports, __webpack_require__) {
 
+  var Hammer = __webpack_require__(45);
   var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var Component = __webpack_require__(25);
 
   /**
-   * Legend for Graph2d
+   * @constructor Item
+   * @param {Object} data             Object containing (optional) parameters type,
+   *                                  start, end, content, group, className.
+   * @param {{toScreen: function, toTime: function}} conversion
+   *                                  Conversion functions from time to screen and vice versa
+   * @param {Object} options          Configuration options
+   *                                  // TODO: describe available options
    */
-  function Legend(body, options, side, linegraphOptions) {
-    this.body = body;
-    this.defaultOptions = {
-      enabled: true,
-      icons: true,
-      iconSize: 20,
-      iconSpacing: 6,
-      left: {
-        visible: true,
-        position: 'top-left' // top/bottom - left,center,right
-      },
-      right: {
-        visible: true,
-        position: 'top-left' // top/bottom - left,center,right
-      }
-    }
-    this.side = side;
-    this.options = util.extend({},this.defaultOptions);
-    this.linegraphOptions = linegraphOptions;
+  function Item (data, conversion, options) {
+    this.id = null;
+    this.parent = null;
+    this.data = data;
+    this.dom = null;
+    this.conversion = conversion || {};
+    this.options = options || {};
 
-    this.svgElements = {};
-    this.dom = {};
-    this.groups = {};
-    this.amountOfGroups = 0;
-    this._create();
+    this.selected = false;
+    this.displayed = false;
+    this.dirty = true;
 
-    this.setOptions(options);
+    this.top = null;
+    this.left = null;
+    this.width = null;
+    this.height = null;
   }
 
-  Legend.prototype = new Component();
-
-  Legend.prototype.clear = function() {
-    this.groups = {};
-    this.amountOfGroups = 0;
-  }
+  Item.prototype.stack = true;
 
-  Legend.prototype.addGroup = function(label, graphOptions) {
+  /**
+   * Select current item
+   */
+  Item.prototype.select = function() {
+    this.selected = true;
+    this.dirty = true;
+    if (this.displayed) this.redraw();
+  };
 
-    if (!this.groups.hasOwnProperty(label)) {
-      this.groups[label] = graphOptions;
-    }
-    this.amountOfGroups += 1;
+  /**
+   * Unselect current item
+   */
+  Item.prototype.unselect = function() {
+    this.selected = false;
+    this.dirty = true;
+    if (this.displayed) this.redraw();
   };
 
-  Legend.prototype.updateGroup = function(label, graphOptions) {
-    this.groups[label] = graphOptions;
+  /**
+   * Set data for the item. Existing data will be updated. The id should not
+   * be changed. When the item is displayed, it will be redrawn immediately.
+   * @param {Object} data
+   */
+  Item.prototype.setData = function(data) {
+    this.data = data;
+    this.dirty = true;
+    if (this.displayed) this.redraw();
   };
 
-  Legend.prototype.removeGroup = function(label) {
-    if (this.groups.hasOwnProperty(label)) {
-      delete this.groups[label];
-      this.amountOfGroups -= 1;
+  /**
+   * Set a parent for the item
+   * @param {ItemSet | Group} parent
+   */
+  Item.prototype.setParent = function(parent) {
+    if (this.displayed) {
+      this.hide();
+      this.parent = parent;
+      if (this.parent) {
+        this.show();
+      }
+    }
+    else {
+      this.parent = parent;
     }
   };
 
-  Legend.prototype._create = function() {
-    this.dom.frame = document.createElement('div');
-    this.dom.frame.className = 'legend';
-    this.dom.frame.style.position = "absolute";
-    this.dom.frame.style.top = "10px";
-    this.dom.frame.style.display = "block";
-
-    this.dom.textArea = document.createElement('div');
-    this.dom.textArea.className = 'legendText';
-    this.dom.textArea.style.position = "relative";
-    this.dom.textArea.style.top = "0px";
+  /**
+   * Check whether this item is visible inside given range
+   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+   * @returns {boolean} True if visible
+   */
+  Item.prototype.isVisible = function(range) {
+    // Should be implemented by Item implementations
+    return false;
+  };
 
-    this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
-    this.svg.style.position = 'absolute';
-    this.svg.style.top = 0 +'px';
-    this.svg.style.width = this.options.iconSize + 5 + 'px';
-    this.svg.style.height = '100%';
+  /**
+   * Show the Item in the DOM (when not already visible)
+   * @return {Boolean} changed
+   */
+  Item.prototype.show = function() {
+    return false;
+  };
 
-    this.dom.frame.appendChild(this.svg);
-    this.dom.frame.appendChild(this.dom.textArea);
+  /**
+   * Hide the Item from the DOM (when visible)
+   * @return {Boolean} changed
+   */
+  Item.prototype.hide = function() {
+    return false;
   };
 
   /**
-   * Hide the component from the DOM
+   * Repaint the item
    */
-  Legend.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
-    }
+  Item.prototype.redraw = function() {
+    // should be implemented by the item
   };
 
   /**
-   * Show the component in the DOM (when not already visible).
-   * @return {Boolean} changed
+   * Reposition the Item horizontally
    */
-  Legend.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
+  Item.prototype.repositionX = function() {
+    // should be implemented by the item
   };
 
-  Legend.prototype.setOptions = function(options) {
-    var fields = ['enabled','orientation','icons','left','right'];
-    util.selectiveDeepExtend(fields, this.options, options);
+  /**
+   * Reposition the Item vertically
+   */
+  Item.prototype.repositionY = function() {
+    // should be implemented by the item
   };
 
-  Legend.prototype.redraw = function() {
-    var activeGroups = 0;
-    for (var groupId in this.groups) {
-      if (this.groups.hasOwnProperty(groupId)) {
-        if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-          activeGroups++;
-        }
-      }
-    }
+  /**
+   * Repaint a delete button on the top right of the item when the item is selected
+   * @param {HTMLElement} anchor
+   * @protected
+   */
+  Item.prototype._repaintDeleteButton = function (anchor) {
+    if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
+      // create and show button
+      var me = this;
 
-    if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false || activeGroups == 0) {
-      this.hide();
-    }
-    else {
-      this.show();
-      if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
-        this.dom.frame.style.left = '4px';
-        this.dom.frame.style.textAlign = "left";
-        this.dom.textArea.style.textAlign = "left";
-        this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
-        this.dom.textArea.style.right = '';
-        this.svg.style.left = 0 +'px';
-        this.svg.style.right = '';
-      }
-      else {
-        this.dom.frame.style.right = '4px';
-        this.dom.frame.style.textAlign = "right";
-        this.dom.textArea.style.textAlign = "right";
-        this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
-        this.dom.textArea.style.left = '';
-        this.svg.style.right = 0 +'px';
-        this.svg.style.left = '';
+      var deleteButton = document.createElement('div');
+      deleteButton.className = 'delete';
+      deleteButton.title = 'Delete this item';
+
+      Hammer(deleteButton, {
+        preventDefault: true
+      }).on('tap', function (event) {
+        me.parent.removeFromDataSet(me);
+        event.stopPropagation();
+      });
+
+      anchor.appendChild(deleteButton);
+      this.dom.deleteButton = deleteButton;
+    }
+    else if (!this.selected && this.dom.deleteButton) {
+      // remove button
+      if (this.dom.deleteButton.parentNode) {
+        this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
       }
+      this.dom.deleteButton = null;
+    }
+  };
 
-      if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
-        this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
-        this.dom.frame.style.bottom = '';
+  /**
+   * Set HTML contents for the item
+   * @param {Element} element   HTML element to fill with the contents
+   * @private
+   */
+  Item.prototype._updateContents = function (element) {
+    var content;
+    if (this.options.template) {
+      var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
+      content = this.options.template(itemData);
+    }
+    else {
+      content = this.data.content;
+    }
+
+    if(content !== this.content) {
+      // only replace the content when changed
+      if (content instanceof Element) {
+        element.innerHTML = '';
+        element.appendChild(content);
+      }
+      else if (content != undefined) {
+        element.innerHTML = content;
       }
       else {
-        var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
-        this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px","")) + 'px';
-        this.dom.frame.style.top = '';
+        if (!(this.data.type == 'background' && this.data.content === undefined)) {
+          throw new Error('Property "content" missing in item ' + this.id);
+        }
       }
 
-      if (this.options.icons == false) {
-        this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
-        this.dom.textArea.style.right = '';
-        this.dom.textArea.style.left = '';
-        this.svg.style.width = '0px';
+      this.content = content;
+    }
+  };
+
+  /**
+   * Set HTML contents for the item
+   * @param {Element} element   HTML element to fill with the contents
+   * @private
+   */
+  Item.prototype._updateTitle = function (element) {
+    if (this.data.title != null) {
+      element.title = this.data.title || '';
+    }
+    else {
+      element.removeAttribute('title');
+    }
+  };
+
+  /**
+   * Process dataAttributes timeline option and set as data- attributes on dom.content
+   * @param {Element} element   HTML element to which the attributes will be attached
+   * @private
+   */
+   Item.prototype._updateDataAttributes = function(element) {
+    if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
+      var attributes = [];
+
+      if (Array.isArray(this.options.dataAttributes)) {
+        attributes = this.options.dataAttributes;
+      }
+      else if (this.options.dataAttributes == 'all') {
+        attributes = Object.keys(this.data);
       }
       else {
-        this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
-        this.drawLegendIcons();
+        return;
       }
 
-      var content = '';
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-            content += this.groups[groupId].content + '<br />';
-          }
+      for (var i = 0; i < attributes.length; i++) {
+        var name = attributes[i];
+        var value = this.data[name];
+
+        if (value != null) {
+          element.setAttribute('data-' + name, value);
+        }
+        else {
+          element.removeAttribute('data-' + name);
         }
       }
-      this.dom.textArea.innerHTML = content;
-      this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
     }
   };
 
-  Legend.prototype.drawLegendIcons = function() {
-    if (this.dom.frame.parentNode) {
-      DOMutil.prepareElements(this.svgElements);
-      var padding = window.getComputedStyle(this.dom.frame).paddingTop;
-      var iconOffset = Number(padding.replace('px',''));
-      var x = iconOffset;
-      var iconWidth = this.options.iconSize;
-      var iconHeight = 0.75 * this.options.iconSize;
-      var y = iconOffset + 0.5 * iconHeight + 3;
-
-      this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
-
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
-            this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
-            y += iconHeight + this.options.iconSpacing;
-          }
-        }
-      }
+  /**
+   * Update custom styles of the element
+   * @param element
+   * @private
+   */
+  Item.prototype._updateStyle = function(element) {
+    // remove old styles
+    if (this.style) {
+      util.removeCssText(element, this.style);
+      this.style = null;
+    }
 
-      DOMutil.cleanupElements(this.svgElements);
+    // append new styles
+    if (this.data.style) {
+      util.addCssText(element, this.data.style);
+      this.style = this.data.style;
     }
   };
 
-  module.exports = Legend;
+  module.exports = Item;
 
 
 /***/ },
-/* 34 */
+/* 32 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var DOMutil = __webpack_require__(2);
-  var DataSet = __webpack_require__(3);
-  var DataView = __webpack_require__(4);
-  var Component = __webpack_require__(25);
-  var DataAxis = __webpack_require__(28);
-  var GraphGroup = __webpack_require__(29);
-  var Legend = __webpack_require__(33);
-  var BarGraphFunctions = __webpack_require__(50);
-
-  var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+  var Hammer = __webpack_require__(45);
+  var Item = __webpack_require__(31);
+  var BackgroundGroup = __webpack_require__(26);
+  var RangeItem = __webpack_require__(35);
 
   /**
-   * This is the constructor of the LineGraph. It requires a Timeline body and options.
-   *
-   * @param body
-   * @param options
-   * @constructor
+   * @constructor BackgroundItem
+   * @extends Item
+   * @param {Object} data             Object containing parameters start, end
+   *                                  content, className.
+   * @param {{toScreen: function, toTime: function}} conversion
+   *                                  Conversion functions from time to screen and vice versa
+   * @param {Object} [options]        Configuration options
+   *                                  // TODO: describe options
    */
-  function LineGraph(body, options) {
-    this.id = util.randomUUID();
-    this.body = body;
-
-    this.defaultOptions = {
-      yAxisOrientation: 'left',
-      defaultGroup: 'default',
-      sort: true,
-      sampling: true,
-      graphHeight: '400px',
-      shaded: {
-        enabled: false,
-        orientation: 'bottom' // top, bottom
-      },
-      style: 'line', // line, bar
-      barChart: {
-        width: 50,
-        handleOverlap: 'overlap',
-        align: 'center' // left, center, right
-      },
-      catmullRom: {
-        enabled: true,
-        parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
-        alpha: 0.5
-      },
-      drawPoints: {
-        enabled: true,
-        size: 6,
-        style: 'square' // square, circle
-      },
-      dataAxis: {
-        showMinorLabels: true,
-        showMajorLabels: true,
-        icons: false,
-        width: '40px',
-        visible: true,
-        alignZeros: true,
-        customRange: {
-          left: {min:undefined, max:undefined},
-          right: {min:undefined, max:undefined}
-        }
-        //, these options are not set by default, but this shows the format they will be in
-        //format: {
-        //  left: {decimals: 2},
-        //  right: {decimals: 2}
-        //},
-        //title: {
-        //  left: {
-        //    text: 'left',
-        //    style: 'color:black;'
-        //  },
-        //  right: {
-        //    text: 'right',
-        //    style: 'color:black;'
-        //  }
-        //}
-      },
-      legend: {
-        enabled: false,
-        icons: true,
-        left: {
-          visible: true,
-          position: 'top-left' // top/bottom - left,right
-        },
-        right: {
-          visible: true,
-          position: 'top-right' // top/bottom - left,right
-        }
-      },
-      groups: {
-        visibility: {}
+  // TODO: implement support for the BackgroundItem just having a start, then being displayed as a sort of an annotation
+  function BackgroundItem (data, conversion, options) {
+    this.props = {
+      content: {
+        width: 0
       }
     };
+    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
 
-    // options is shared by this ItemSet and all its items
-    this.options = util.extend({}, this.defaultOptions);
-    this.dom = {};
-    this.props = {};
-    this.hammer = null;
-    this.groups = {};
-    this.abortedGraphUpdate = false;
-    this.updateSVGheight = false;
-    this.updateSVGheightOnResize = false;
-
-    var me = this;
-    this.itemsData = null;    // DataSet
-    this.groupsData = null;   // DataSet
-
-    // listeners for the DataSet of the items
-    this.itemListeners = {
-      'add': function (event, params, senderId) {
-        me._onAdd(params.items);
-      },
-      'update': function (event, params, senderId) {
-        me._onUpdate(params.items);
-      },
-      'remove': function (event, params, senderId) {
-        me._onRemove(params.items);
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data.id);
       }
-    };
-
-    // listeners for the DataSet of the groups
-    this.groupListeners = {
-      'add': function (event, params, senderId) {
-        me._onAddGroups(params.items);
-      },
-      'update': function (event, params, senderId) {
-        me._onUpdateGroups(params.items);
-      },
-      'remove': function (event, params, senderId) {
-        me._onRemoveGroups(params.items);
+      if (data.end == undefined) {
+        throw new Error('Property "end" missing in item ' + data.id);
       }
-    };
-
-    this.items = {};      // object with an Item for every data item
-    this.selection = [];  // list with the ids of all selected nodes
-    this.lastStart = this.body.range.start;
-    this.touchParams = {}; // stores properties while dragging
-
-    this.svgElements = {};
-    this.setOptions(options);
-    this.groupsUsingDefaultStyles = [0];
-    this.COUNTER = 0;
-    this.body.emitter.on('rangechanged', function() {
-      me.lastStart = me.body.range.start;
-      me.svg.style.left = util.option.asSize(-me.props.width);
-      me.redraw.call(me,true);
-    });
+    }
 
-    // create the HTML DOM
-    this._create();
-    this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
-    this.body.emitter.emit('change');
+    Item.call(this, data, conversion, options);
 
+    this.emptyContent = false;
   }
 
-  LineGraph.prototype = new Component();
+  BackgroundItem.prototype = new Item (null, null, null);
+
+  BackgroundItem.prototype.baseClassName = 'item background';
+  BackgroundItem.prototype.stack = false;
 
   /**
-   * Create the HTML DOM for the ItemSet
+   * Check whether this item is visible inside given range
+   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+   * @returns {boolean} True if visible
    */
-  LineGraph.prototype._create = function(){
-    var frame = document.createElement('div');
-    frame.className = 'LineGraph';
-    this.dom.frame = frame;
+  BackgroundItem.prototype.isVisible = function(range) {
+    // determine visibility
+    return (this.data.start < range.end) && (this.data.end > range.start);
+  };
 
-    // create svg element for graph drawing.
-    this.svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
-    this.svg.style.position = 'relative';
-    this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
-    this.svg.style.display = 'block';
-    frame.appendChild(this.svg);
+  /**
+   * Repaint the item
+   */
+  BackgroundItem.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    // data axis
-    this.options.dataAxis.orientation = 'left';
-    this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+      // background box
+      dom.box = document.createElement('div');
+      // className is updated in redraw()
 
-    this.options.dataAxis.orientation = 'right';
-    this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
-    delete this.options.dataAxis.orientation;
+      // contents box
+      dom.content = document.createElement('div');
+      dom.content.className = 'content';
+      dom.box.appendChild(dom.content);
 
-    // legends
-    this.legendLeft = new Legend(this.body, this.options.legend, 'left', this.options.groups);
-    this.legendRight = new Legend(this.body, this.options.legend, 'right', this.options.groups);
+      // Note: we do NOT attach this item as attribute to the DOM,
+      //       such that background items cannot be selected
+      //dom.box['timeline-item'] = this;
 
-    this.show();
-  };
+      this.dirty = true;
+    }
 
-  /**
-   * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
-   * @param {object} options
-   */
-  LineGraph.prototype.setOptions = function(options) {
-    if (options) {
-      var fields = ['sampling','defaultGroup','height','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
-      if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) {
-        this.updateSVGheight = true;
-        this.updateSVGheightOnResize = true;
-      }
-      else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
-        if (parseInt((options.graphHeight + '').replace("px",'')) < this.body.domProps.centerContainer.height) {
-          this.updateSVGheight = true;
-        }
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
+    }
+    if (!dom.box.parentNode) {
+      var background = this.parent.dom.background;
+      if (!background) {
+        throw new Error('Cannot redraw item: parent has no background container element');
       }
-      util.selectiveDeepExtend(fields, this.options, options);
-      util.mergeOptions(this.options, options,'catmullRom');
-      util.mergeOptions(this.options, options,'drawPoints');
-      util.mergeOptions(this.options, options,'shaded');
-      util.mergeOptions(this.options, options,'legend');
+      background.appendChild(dom.box);
+    }
+    this.displayed = true;
 
-      if (options.catmullRom) {
-        if (typeof options.catmullRom == 'object') {
-          if (options.catmullRom.parametrization) {
-            if (options.catmullRom.parametrization == 'uniform') {
-              this.options.catmullRom.alpha = 0;
-            }
-            else if (options.catmullRom.parametrization == 'chordal') {
-              this.options.catmullRom.alpha = 1.0;
-            }
-            else {
-              this.options.catmullRom.parametrization = 'centripetal';
-              this.options.catmullRom.alpha = 0.5;
-            }
-          }
-        }
-      }
+    // Update DOM when item is marked dirty. An item is marked dirty when:
+    // - the item is not yet rendered
+    // - the item's data is changed
+    // - the item is selected/deselected
+    if (this.dirty) {
+      this._updateContents(this.dom.content);
+      this._updateTitle(this.dom.content);
+      this._updateDataAttributes(this.dom.content);
+      this._updateStyle(this.dom.box);
 
-      if (this.yAxisLeft) {
-        if (options.dataAxis !== undefined) {
-          this.yAxisLeft.setOptions(this.options.dataAxis);
-          this.yAxisRight.setOptions(this.options.dataAxis);
-        }
-      }
+      // update class
+      var className = (this.data.className ? (' ' + this.data.className) : '') +
+          (this.selected ? ' selected' : '');
+      dom.box.className = this.baseClassName + className;
 
-      if (this.legendLeft) {
-        if (options.legend !== undefined) {
-          this.legendLeft.setOptions(this.options.legend);
-          this.legendRight.setOptions(this.options.legend);
-        }
-      }
+      // determine from css whether this box has overflow
+      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
 
-      if (this.groups.hasOwnProperty(UNGROUPED)) {
-        this.groups[UNGROUPED].setOptions(options);
-      }
-    }
+      // recalculate size
+      this.props.content.width = this.dom.content.offsetWidth;
+      this.height = 0; // set height zero, so this item will be ignored when stacking items
 
-    // this is used to redraw the graph if the visibility of the groups is changed.
-    if (this.dom.frame) {
-      this.redraw(true);
+      this.dirty = false;
     }
   };
 
   /**
-   * Hide the component from the DOM
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  LineGraph.prototype.hide = function() {
-    // remove the frame containing the items
-    if (this.dom.frame.parentNode) {
-      this.dom.frame.parentNode.removeChild(this.dom.frame);
-    }
-  };
-
+  BackgroundItem.prototype.show = RangeItem.prototype.show;
 
   /**
-   * Show the component in the DOM (when not already visible).
+   * Hide the item from the DOM (when visible)
    * @return {Boolean} changed
    */
-  LineGraph.prototype.show = function() {
-    // show frame containing the items
-    if (!this.dom.frame.parentNode) {
-      this.body.dom.center.appendChild(this.dom.frame);
-    }
-  };
-
+  BackgroundItem.prototype.hide = RangeItem.prototype.hide;
 
   /**
-   * Set items
-   * @param {vis.DataSet | null} items
+   * Reposition the item horizontally
+   * @Override
    */
-  LineGraph.prototype.setItems = function(items) {
-    var me = this,
-      ids,
-      oldItemsData = this.itemsData;
+  BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
 
-    // replace the dataset
-    if (!items) {
-      this.itemsData = null;
-    }
-    else if (items instanceof DataSet || items instanceof DataView) {
-      this.itemsData = items;
-    }
-    else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
-    }
+  /**
+   * Reposition the item vertically
+   * @Override
+   */
+  BackgroundItem.prototype.repositionY = function(margin) {
+    var onTop = this.options.orientation === 'top';
+    this.dom.content.style.top = onTop ? '' : '0';
+    this.dom.content.style.bottom = onTop ? '0' : '';
+    var height;
 
-    if (oldItemsData) {
-      // unsubscribe from old dataset
-      util.forEach(this.itemListeners, function (callback, event) {
-        oldItemsData.off(event, callback);
-      });
+    // special positioning for subgroups
+    if (this.data.subgroup !== undefined) {
+      var itemSubgroup = this.data.subgroup;
+      var subgroups = this.parent.subgroups;
+      var subgroupIndex = subgroups[itemSubgroup].index;
+      // if the orientation is top, we need to take the difference in height into account.
+      if (onTop == true) {
+        // the first subgroup will have to account for the distance from the top to the first item.
+        height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+        height += subgroupIndex == 0 ? margin.axis - 0.5*margin.item.vertical : 0;
+        var newTop = this.parent.top;
+        for (var subgroup in subgroups) {
+          if (subgroups.hasOwnProperty(subgroup)) {
+            if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroupIndex) {
+              newTop += subgroups[subgroup].height + margin.item.vertical;
+            }
+          }
+        }
 
-      // remove all drawn items
-      ids = oldItemsData.getIds();
-      this._onRemove(ids);
+        // the others will have to be offset downwards with this same distance.
+        newTop += subgroupIndex != 0 ? margin.axis - 0.5 * margin.item.vertical : 0;
+        this.dom.box.style.top = newTop + 'px';
+        this.dom.box.style.bottom = '';
+      }
+      // and when the orientation is bottom:
+      else {
+        var newTop = this.parent.top;
+        for (var subgroup in subgroups) {
+          if (subgroups.hasOwnProperty(subgroup)) {
+            if (subgroups[subgroup].visible == true && subgroups[subgroup].index > subgroupIndex) {
+              newTop += subgroups[subgroup].height + margin.item.vertical;
+            }
+          }
+        }
+        height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+        this.dom.box.style.top = newTop + 'px';
+        this.dom.box.style.bottom = '';
+      }
+    }
+    // and in the case of no subgroups:
+    else {
+      // we want backgrounds with groups to only show in groups.
+      if (this.parent instanceof BackgroundGroup) {
+        // if the item is not in a group:
+        height = Math.max(this.parent.height,
+            this.parent.itemSet.body.domProps.center.height,
+            this.parent.itemSet.body.domProps.centerContainer.height);
+        this.dom.box.style.top = onTop ? '0' : '';
+        this.dom.box.style.bottom = onTop ? '' : '0';
+      }
+      else {
+        height = this.parent.height;
+        // same alignment for items when orientation is top or bottom
+        this.dom.box.style.top = this.parent.top + 'px';
+        this.dom.box.style.bottom = '';
+      }
     }
+    this.dom.box.style.height = height + 'px';
+  };
 
-    if (this.itemsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.itemListeners, function (callback, event) {
-        me.itemsData.on(event, callback, id);
-      });
+  module.exports = BackgroundItem;
 
-      // add all new items
-      ids = this.itemsData.getIds();
-      this._onAdd(ids);
+
+/***/ },
+/* 33 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Item = __webpack_require__(31);
+  var util = __webpack_require__(1);
+
+  /**
+   * @constructor BoxItem
+   * @extends Item
+   * @param {Object} data             Object containing parameters start
+   *                                  content, className.
+   * @param {{toScreen: function, toTime: function}} conversion
+   *                                  Conversion functions from time to screen and vice versa
+   * @param {Object} [options]        Configuration options
+   *                                  // TODO: describe available options
+   */
+  function BoxItem (data, conversion, options) {
+    this.props = {
+      dot: {
+        width: 0,
+        height: 0
+      },
+      line: {
+        width: 0,
+        height: 0
+      }
+    };
+
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data);
+      }
     }
-    this._updateUngrouped();
-    //this._updateGraph();
-    this.redraw(true);
-  };
 
+    Item.call(this, data, conversion, options);
+  }
+
+  BoxItem.prototype = new Item (null, null, null);
 
   /**
-   * Set groups
-   * @param {vis.DataSet} groups
+   * Check whether this item is visible inside given range
+   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+   * @returns {boolean} True if visible
    */
-  LineGraph.prototype.setGroups = function(groups) {
-    var me = this;
-    var ids;
+  BoxItem.prototype.isVisible = function(range) {
+    // determine visibility
+    // TODO: account for the real width of the item. Right now we just add 1/4 to the window
+    var interval = (range.end - range.start) / 4;
+    return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
+  };
 
-    // unsubscribe from current dataset
-    if (this.groupsData) {
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.unsubscribe(event, callback);
-      });
+  /**
+   * Repaint the item
+   */
+  BoxItem.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-      // remove all drawn groups
-      ids = this.groupsData.getIds();
-      this.groupsData = null;
-      this._onRemoveGroups(ids); // note: this will cause a redraw
+      // create main box
+      dom.box = document.createElement('DIV');
+
+      // contents box (inside the background box). used for making margins
+      dom.content = document.createElement('DIV');
+      dom.content.className = 'content';
+      dom.box.appendChild(dom.content);
+
+      // line to axis
+      dom.line = document.createElement('DIV');
+      dom.line.className = 'line';
+
+      // dot on axis
+      dom.dot = document.createElement('DIV');
+      dom.dot.className = 'dot';
+
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
+
+      this.dirty = true;
     }
 
-    // replace the dataset
-    if (!groups) {
-      this.groupsData = null;
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
     }
-    else if (groups instanceof DataSet || groups instanceof DataView) {
-      this.groupsData = groups;
+    if (!dom.box.parentNode) {
+      var foreground = this.parent.dom.foreground;
+      if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
+      foreground.appendChild(dom.box);
     }
-    else {
-      throw new TypeError('Data must be an instance of DataSet or DataView');
+    if (!dom.line.parentNode) {
+      var background = this.parent.dom.background;
+      if (!background) throw new Error('Cannot redraw item: parent has no background container element');
+      background.appendChild(dom.line);
+    }
+    if (!dom.dot.parentNode) {
+      var axis = this.parent.dom.axis;
+      if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
+      axis.appendChild(dom.dot);
     }
+    this.displayed = true;
 
-    if (this.groupsData) {
-      // subscribe to new dataset
-      var id = this.id;
-      util.forEach(this.groupListeners, function (callback, event) {
-        me.groupsData.on(event, callback, id);
-      });
+    // Update DOM when item is marked dirty. An item is marked dirty when:
+    // - the item is not yet rendered
+    // - the item's data is changed
+    // - the item is selected/deselected
+    if (this.dirty) {
+      this._updateContents(this.dom.content);
+      this._updateTitle(this.dom.box);
+      this._updateDataAttributes(this.dom.box);
+      this._updateStyle(this.dom.box);
 
-      // draw all ms
-      ids = this.groupsData.getIds();
-      this._onAddGroups(ids);
-    }
-    this._onUpdate();
-  };
+      // update class
+      var className = (this.data.className? ' ' + this.data.className : '') +
+          (this.selected ? ' selected' : '');
+      dom.box.className = 'item box' + className;
+      dom.line.className = 'item line' + className;
+      dom.dot.className  = 'item dot' + className;
 
+      // recalculate size
+      this.props.dot.height = dom.dot.offsetHeight;
+      this.props.dot.width = dom.dot.offsetWidth;
+      this.props.line.width = dom.line.offsetWidth;
+      this.width = dom.box.offsetWidth;
+      this.height = dom.box.offsetHeight;
 
-  /**
-   * Update the data
-   * @param [ids]
-   * @private
-   */
-  LineGraph.prototype._onUpdate = function(ids) {
-    this._updateUngrouped();
-    this._updateAllGroupData();
-    //this._updateGraph();
-    this.redraw(true);
-  };
-  LineGraph.prototype._onAdd          = function (ids) {this._onUpdate(ids);};
-  LineGraph.prototype._onRemove       = function (ids) {this._onUpdate(ids);};
-  LineGraph.prototype._onUpdateGroups  = function (groupIds) {
-    for (var i = 0; i < groupIds.length; i++) {
-      var group = this.groupsData.get(groupIds[i]);
-      this._updateGroup(group, groupIds[i]);
+      this.dirty = false;
     }
 
-    //this._updateGraph();
-    this.redraw(true);
+    this._repaintDeleteButton(dom.box);
   };
-  LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
-
 
   /**
-   * this cleans the group out off the legends and the dataaxis, updates the ungrouped and updates the graph
-   * @param {Array} groupIds
-   * @private
+   * Show the item in the DOM (when not already displayed). The items DOM will
+   * be created when needed.
    */
-  LineGraph.prototype._onRemoveGroups = function (groupIds) {
-    for (var i = 0; i < groupIds.length; i++) {
-      if (this.groups.hasOwnProperty(groupIds[i])) {
-        if (this.groups[groupIds[i]].options.yAxisOrientation == 'right') {
-          this.yAxisRight.removeGroup(groupIds[i]);
-          this.legendRight.removeGroup(groupIds[i]);
-          this.legendRight.redraw();
-        }
-        else {
-          this.yAxisLeft.removeGroup(groupIds[i]);
-          this.legendLeft.removeGroup(groupIds[i]);
-          this.legendLeft.redraw();
-        }
-        delete this.groups[groupIds[i]];
-      }
+  BoxItem.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
-    this._updateUngrouped();
-    //this._updateGraph();
-    this.redraw(true);
   };
 
-
   /**
-   * update a group object with the group dataset entree
-   *
-   * @param group
-   * @param groupId
-   * @private
+   * Hide the item from the DOM (when visible)
    */
-  LineGraph.prototype._updateGroup = function (group, groupId) {
-    if (!this.groups.hasOwnProperty(groupId)) {
-      this.groups[groupId] = new GraphGroup(group, groupId, this.options, this.groupsUsingDefaultStyles);
-      if (this.groups[groupId].options.yAxisOrientation == 'right') {
-        this.yAxisRight.addGroup(groupId, this.groups[groupId]);
-        this.legendRight.addGroup(groupId, this.groups[groupId]);
-      }
-      else {
-        this.yAxisLeft.addGroup(groupId, this.groups[groupId]);
-        this.legendLeft.addGroup(groupId, this.groups[groupId]);
-      }
-    }
-    else {
-      this.groups[groupId].update(group);
-      if (this.groups[groupId].options.yAxisOrientation == 'right') {
-        this.yAxisRight.updateGroup(groupId, this.groups[groupId]);
-        this.legendRight.updateGroup(groupId, this.groups[groupId]);
-      }
-      else {
-        this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
-        this.legendLeft.updateGroup(groupId, this.groups[groupId]);
-      }
-    }
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-  };
+  BoxItem.prototype.hide = function() {
+    if (this.displayed) {
+      var dom = this.dom;
 
+      if (dom.box.parentNode)   dom.box.parentNode.removeChild(dom.box);
+      if (dom.line.parentNode)  dom.line.parentNode.removeChild(dom.line);
+      if (dom.dot.parentNode)   dom.dot.parentNode.removeChild(dom.dot);
 
-  /**
-   * this updates all groups, it is used when there is an update the the itemset.
-   *
-   * @private
-   */
-  LineGraph.prototype._updateAllGroupData = function () {
-    if (this.itemsData != null) {
-      var groupsContent = {};
-      var groupId;
-      for (groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          groupsContent[groupId] = [];
-        }
-      }
-      for (var itemId in this.itemsData._data) {
-        if (this.itemsData._data.hasOwnProperty(itemId)) {
-          var item = this.itemsData._data[itemId];
-          if (groupsContent[item.group] === undefined) {
-            throw new Error('Cannot find referenced group. Possible reason: items added before groups? Groups need to be added before items, as items refer to groups.')
-          }
-          item.x = util.convert(item.x,'Date');
-          groupsContent[item.group].push(item);
-        }
-      }
-      for (groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          this.groups[groupId].setItems(groupsContent[groupId]);
-        }
-      }
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
     }
   };
 
-
   /**
-   * Create or delete the group holding all ungrouped items. This group is used when
-   * there are no groups specified. This anonymous group is called 'graph'.
-   * @protected
+   * Reposition the item horizontally
+   * @Override
    */
-  LineGraph.prototype._updateUngrouped = function() {
-    if (this.itemsData && this.itemsData != null) {
-      var ungroupedCounter = 0;
-      for (var itemId in this.itemsData._data) {
-        if (this.itemsData._data.hasOwnProperty(itemId)) {
-          var item = this.itemsData._data[itemId];
-          if (item != undefined) {
-            if (item.hasOwnProperty('group')) {
-              if (item.group === undefined) {
-                item.group = UNGROUPED;
-              }
-            }
-            else {
-              item.group = UNGROUPED;
-            }
-            ungroupedCounter = item.group == UNGROUPED ? ungroupedCounter + 1 : ungroupedCounter;
-          }
-        }
-      }
+  BoxItem.prototype.repositionX = function() {
+    var start = this.conversion.toScreen(this.data.start);
+    var align = this.options.align;
+    var left;
+    var box = this.dom.box;
+    var line = this.dom.line;
+    var dot = this.dom.dot;
 
-      if (ungroupedCounter == 0) {
-        delete this.groups[UNGROUPED];
-        this.legendLeft.removeGroup(UNGROUPED);
-        this.legendRight.removeGroup(UNGROUPED);
-        this.yAxisLeft.removeGroup(UNGROUPED);
-        this.yAxisRight.removeGroup(UNGROUPED);
-      }
-      else {
-        var group = {id: UNGROUPED, content: this.options.defaultGroup};
-        this._updateGroup(group, UNGROUPED);
-      }
+    // calculate left position of the box
+    if (align == 'right') {
+      this.left = start - this.width;
+    }
+    else if (align == 'left') {
+      this.left = start;
     }
     else {
-      delete this.groups[UNGROUPED];
-      this.legendLeft.removeGroup(UNGROUPED);
-      this.legendRight.removeGroup(UNGROUPED);
-      this.yAxisLeft.removeGroup(UNGROUPED);
-      this.yAxisRight.removeGroup(UNGROUPED);
+      // default or 'center'
+      this.left = start - this.width / 2;
     }
 
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-  };
+    // reposition box
+    box.style.left = this.left + 'px';
+
+    // reposition line
+    line.style.left = (start - this.props.line.width / 2) + 'px';
 
+    // reposition dot
+    dot.style.left = (start - this.props.dot.width / 2) + 'px';
+  };
 
   /**
-   * Redraw the component, mandatory function
-   * @return {boolean} Returns true if the component is resized
+   * Reposition the item vertically
+   * @Override
    */
-  LineGraph.prototype.redraw = function(forceGraphUpdate) {
-    var resized = false;
+  BoxItem.prototype.repositionY = function() {
+    var orientation = this.options.orientation;
+    var box = this.dom.box;
+    var line = this.dom.line;
+    var dot = this.dom.dot;
 
-    // calculate actual size and position
-    this.props.width = this.dom.frame.offsetWidth;
-    this.props.height = this.body.domProps.centerContainer.height;
+    if (orientation == 'top') {
+      box.style.top     = (this.top || 0) + 'px';
 
-    // update the graph if there is no lastWidth or with, used for the initial draw
-    if (this.lastWidth === undefined && this.props.width) {
-      forceGraphUpdate = true;
+      line.style.top    = '0';
+      line.style.height = (this.parent.top + this.top + 1) + 'px';
+      line.style.bottom = '';
     }
+    else { // orientation 'bottom'
+      var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
+      var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
 
-    // check if this component is resized
-    resized = this._isResized() || resized;
+      box.style.top     = (this.parent.height - this.top - this.height || 0) + 'px';
+      line.style.top    = (itemSetHeight - lineHeight) + 'px';
+      line.style.bottom = '0';
+    }
 
-    // check whether zoomed (in that case we need to re-stack everything)
-    var visibleInterval = this.body.range.end - this.body.range.start;
-    var zoomed = (visibleInterval != this.lastVisibleInterval);
-    this.lastVisibleInterval = visibleInterval;
+    dot.style.top = (-this.props.dot.height / 2) + 'px';
+  };
 
+  module.exports = BoxItem;
 
-    // the svg element is three times as big as the width, this allows for fully dragging left and right
-    // without reloading the graph. the controls for this are bound to events in the constructor
-    if (resized == true) {
-      this.svg.style.width = util.option.asSize(3*this.props.width);
-      this.svg.style.left = util.option.asSize(-this.props.width);
 
-      // if the height of the graph is set as proportional, change the height of the svg
-      if ((this.options.height + '').indexOf("%") != -1 || this.updateSVGheightOnResize == true) {
-        this.updateSVGheight = true;
+/***/ },
+/* 34 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Item = __webpack_require__(31);
+
+  /**
+   * @constructor PointItem
+   * @extends Item
+   * @param {Object} data             Object containing parameters start
+   *                                  content, className.
+   * @param {{toScreen: function, toTime: function}} conversion
+   *                                  Conversion functions from time to screen and vice versa
+   * @param {Object} [options]        Configuration options
+   *                                  // TODO: describe available options
+   */
+  function PointItem (data, conversion, options) {
+    this.props = {
+      dot: {
+        top: 0,
+        width: 0,
+        height: 0
+      },
+      content: {
+        height: 0,
+        marginLeft: 0
       }
-    }
+    };
 
-    // update the height of the graph on each redraw of the graph.
-    if (this.updateSVGheight == true) {
-      if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
-        this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
-        this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data);
       }
-      this.updateSVGheight = false;
-    }
-    else {
-      this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
     }
 
-    // zoomed is here to ensure that animations are shown correctly.
-    if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
-      resized = this._updateGraph() || resized;
-    }
-    else {
-      // move the whole svg while dragging
-      if (this.lastStart != 0) {
-        var offset = this.body.range.start - this.lastStart;
-        var range = this.body.range.end - this.body.range.start;
-        if (this.props.width != 0) {
-          var rangePerPixelInv = this.props.width/range;
-          var xOffset = offset * rangePerPixelInv;
-          this.svg.style.left = (-this.props.width - xOffset) + 'px';
-        }
-      }
-    }
-
-    this.legendLeft.redraw();
-    this.legendRight.redraw();
-    return resized;
-  };
+    Item.call(this, data, conversion, options);
+  }
 
+  PointItem.prototype = new Item (null, null, null);
 
   /**
-   * Update and redraw the graph.
-   *
+   * Check whether this item is visible inside given range
+   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+   * @returns {boolean} True if visible
    */
-  LineGraph.prototype._updateGraph = function () {
-    // reset the svg elements
-    DOMutil.prepareElements(this.svgElements);
-    if (this.props.width != 0 && this.itemsData != null) {
-      var group, i;
-      var preprocessedGroupData = {};
-      var processedGroupData = {};
-      var groupRanges = {};
-      var changeCalled = false;
+  PointItem.prototype.isVisible = function(range) {
+    // determine visibility
+    // TODO: account for the real width of the item. Right now we just add 1/4 to the window
+    var interval = (range.end - range.start) / 4;
+    return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
+  };
 
-      // getting group Ids
-      var groupIds = [];
-      for (var groupId in this.groups) {
-        if (this.groups.hasOwnProperty(groupId)) {
-          group = this.groups[groupId];
-          if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
-            groupIds.push(groupId);
-          }
-        }
-      }
-      if (groupIds.length > 0) {
-        // this is the range of the SVG canvas
-        var minDate = this.body.util.toGlobalTime(-this.body.domProps.root.width);
-        var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
-        var groupsData = {};
-        // fill groups data, this only loads the data we require based on the timewindow
-        this._getRelevantData(groupIds, groupsData, minDate, maxDate);
+  /**
+   * Repaint the item
+   */
+  PointItem.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-        // apply sampling, if disabled, it will pass through this function.
-        this._applySampling(groupIds, groupsData);
+      // background box
+      dom.point = document.createElement('div');
+      // className is updated in redraw()
 
-        // we transform the X coordinates to detect collisions
-        for (i = 0; i < groupIds.length; i++) {
-          preprocessedGroupData[groupIds[i]] = this._convertXcoordinates(groupsData[groupIds[i]]);
-        }
+      // contents box, right from the dot
+      dom.content = document.createElement('div');
+      dom.content.className = 'content';
+      dom.point.appendChild(dom.content);
 
-        // now all needed data has been collected we start the processing.
-        this._getYRanges(groupIds, preprocessedGroupData, groupRanges);
+      // dot at start
+      dom.dot = document.createElement('div');
+      dom.point.appendChild(dom.dot);
 
-        // update the Y axis first, we use this data to draw at the correct Y points
-        // changeCalled is required to clean the SVG on a change emit.
-        changeCalled = this._updateYAxis(groupIds, groupRanges);
-        var MAX_CYCLES = 5;
-        if (changeCalled == true && this.COUNTER < MAX_CYCLES) {
-          DOMutil.cleanupElements(this.svgElements);
-          this.abortedGraphUpdate = true;
-          this.COUNTER++;
-          this.body.emitter.emit('change');
-          return true;
-        }
-        else {
-          if (this.COUNTER > MAX_CYCLES) {
-            console.log("WARNING: there may be an infinite loop in the _updateGraph emitter cycle.")
-          }
-          this.COUNTER = 0;
-          this.abortedGraphUpdate = false;
+      // attach this item as attribute
+      dom.point['timeline-item'] = this;
 
-          // With the yAxis scaled correctly, use this to get the Y values of the points.
-          for (i = 0; i < groupIds.length; i++) {
-            group = this.groups[groupIds[i]];
-            processedGroupData[groupIds[i]] = this._convertYcoordinates(groupsData[groupIds[i]], group);
-          }
+      this.dirty = true;
+    }
 
-          // draw the groups
-          for (i = 0; i < groupIds.length; i++) {
-            group = this.groups[groupIds[i]];
-            if (group.options.style != 'bar') { // bar needs to be drawn enmasse
-              group.draw(processedGroupData[groupIds[i]], group, this.framework);
-            }
-          }
-          BarGraphFunctions.draw(groupIds, processedGroupData, this.framework);
-        }
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
+    }
+    if (!dom.point.parentNode) {
+      var foreground = this.parent.dom.foreground;
+      if (!foreground) {
+        throw new Error('Cannot redraw item: parent has no foreground container element');
       }
+      foreground.appendChild(dom.point);
     }
+    this.displayed = true;
 
-    // cleanup unused svg elements
-    DOMutil.cleanupElements(this.svgElements);
-    return false;
-  };
+    // Update DOM when item is marked dirty. An item is marked dirty when:
+    // - the item is not yet rendered
+    // - the item's data is changed
+    // - the item is selected/deselected
+    if (this.dirty) {
+      this._updateContents(this.dom.content);
+      this._updateTitle(this.dom.point);
+      this._updateDataAttributes(this.dom.point);
+      this._updateStyle(this.dom.point);
 
+      // update class
+      var className = (this.data.className? ' ' + this.data.className : '') +
+          (this.selected ? ' selected' : '');
+      dom.point.className  = 'item point' + className;
+      dom.dot.className  = 'item dot' + className;
 
-  /**
-   * first select and preprocess the data from the datasets.
-   * the groups have their preselection of data, we now loop over this data to see
-   * what data we need to draw. Sorted data is much faster.
-   * more optimization is possible by doing the sampling before and using the binary search
-   * to find the end date to determine the increment.
-   *
-   * @param {array}  groupIds
-   * @param {object} groupsData
-   * @param {date}   minDate
-   * @param {date}   maxDate
-   * @private
-   */
-  LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
-    var group, i, j, item;
-    if (groupIds.length > 0) {
-      for (i = 0; i < groupIds.length; i++) {
-        group = this.groups[groupIds[i]];
-        groupsData[groupIds[i]] = [];
-        var dataContainer = groupsData[groupIds[i]];
-        // optimization for sorted data
-        if (group.options.sort == true) {
-          var guess = Math.max(0, util.binarySearchValue(group.itemsData, minDate, 'x', 'before'));
-          for (j = guess; j < group.itemsData.length; j++) {
-            item = group.itemsData[j];
-            if (item !== undefined) {
-              if (item.x > maxDate) {
-                dataContainer.push(item);
-                break;
-              }
-              else {
-                dataContainer.push(item);
-              }
-            }
-          }
-        }
-        else {
-          for (j = 0; j < group.itemsData.length; j++) {
-            item = group.itemsData[j];
-            if (item !== undefined) {
-              if (item.x > minDate && item.x < maxDate) {
-                dataContainer.push(item);
-              }
-            }
-          }
-        }
-      }
-    }
-  };
+      // recalculate size
+      this.width = dom.point.offsetWidth;
+      this.height = dom.point.offsetHeight;
+      this.props.dot.width = dom.dot.offsetWidth;
+      this.props.dot.height = dom.dot.offsetHeight;
+      this.props.content.height = dom.content.offsetHeight;
 
+      // resize contents
+      dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
+      //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
 
-  /**
-   *
-   * @param groupIds
-   * @param groupsData
-   * @private
-   */
-  LineGraph.prototype._applySampling = function (groupIds, groupsData) {
-    var group;
-    if (groupIds.length > 0) {
-      for (var i = 0; i < groupIds.length; i++) {
-        group = this.groups[groupIds[i]];
-        if (group.options.sampling == true) {
-          var dataContainer = groupsData[groupIds[i]];
-          if (dataContainer.length > 0) {
-            var increment = 1;
-            var amountOfPoints = dataContainer.length;
+      dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
+      dom.dot.style.left = (this.props.dot.width / 2) + 'px';
 
-            // the global screen is used because changing the width of the yAxis may affect the increment, resulting in an endless loop
-            // of width changing of the yAxis.
-            var xDistance = this.body.util.toGlobalScreen(dataContainer[dataContainer.length - 1].x) - this.body.util.toGlobalScreen(dataContainer[0].x);
-            var pointsPerPixel = amountOfPoints / xDistance;
-            increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1, Math.round(pointsPerPixel)));
+      this.dirty = false;
+    }
 
-            var sampledData = [];
-            for (var j = 0; j < amountOfPoints; j += increment) {
-              sampledData.push(dataContainer[j]);
+    this._repaintDeleteButton(dom.point);
+  };
 
-            }
-            groupsData[groupIds[i]] = sampledData;
-          }
-        }
-      }
+  /**
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
+   */
+  PointItem.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
   };
 
-
   /**
-   *
-   *
-   * @param {array}  groupIds
-   * @param {object} groupsData
-   * @param {object} groupRanges  | this is being filled here
-   * @private
+   * Hide the item from the DOM (when visible)
    */
-  LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
-    var groupData, group, i;
-    var barCombinedDataLeft = [];
-    var barCombinedDataRight = [];
-    var options;
-    if (groupIds.length > 0) {
-      for (i = 0; i < groupIds.length; i++) {
-        groupData = groupsData[groupIds[i]];
-        options = this.groups[groupIds[i]].options;
-        if (groupData.length > 0) {
-          group = this.groups[groupIds[i]];
-          // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
-          if (options.barChart.handleOverlap == 'stack' && options.style == 'bar') {
-            if (options.yAxisOrientation == 'left') {barCombinedDataLeft  = barCombinedDataLeft.concat(group.getYRange(groupData)) ;}
-            else                                    {barCombinedDataRight = barCombinedDataRight.concat(group.getYRange(groupData));}
-          }
-          else {
-            groupRanges[groupIds[i]] = group.getYRange(groupData,groupIds[i]);
-          }
-        }
+  PointItem.prototype.hide = function() {
+    if (this.displayed) {
+      if (this.dom.point.parentNode) {
+        this.dom.point.parentNode.removeChild(this.dom.point);
       }
 
-      // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
-      BarGraphFunctions.getStackedBarYRange(barCombinedDataLeft , groupRanges, groupIds, '__barchartLeft' , 'left' );
-      BarGraphFunctions.getStackedBarYRange(barCombinedDataRight, groupRanges, groupIds, '__barchartRight', 'right');
+      this.top = null;
+      this.left = null;
+
+      this.displayed = false;
     }
   };
 
-
   /**
-   * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
-   * @param {Array} groupIds
-   * @param {Object} groupRanges
-   * @private
+   * Reposition the item horizontally
+   * @Override
    */
-  LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
-    var resized = false;
-    var yAxisLeftUsed = false;
-    var yAxisRightUsed = false;
-    var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
-    // if groups are present
-    if (groupIds.length > 0) {
-      // this is here to make sure that if there are no items in the axis but there are groups, that there is no infinite draw/redraw loop.
-      for (var i = 0; i < groupIds.length; i++) {
-        var group = this.groups[groupIds[i]];
-        if (group && group.options.yAxisOrientation != 'right') {
-          yAxisLeftUsed = true;
-          minLeft = 0;
-          maxLeft = 0;
-        }
-        else if (group && group.options.yAxisOrientation) {
-          yAxisRightUsed = true;
-          minRight = 0;
-          maxRight = 0;
-        }
-      }
+  PointItem.prototype.repositionX = function() {
+    var start = this.conversion.toScreen(this.data.start);
 
-      // if there are items:
-      for (var i = 0; i < groupIds.length; i++) {
-        if (groupRanges.hasOwnProperty(groupIds[i])) {
-          if (groupRanges[groupIds[i]].ignore !== true) {
-            minVal = groupRanges[groupIds[i]].min;
-            maxVal = groupRanges[groupIds[i]].max;
+    this.left = start - this.props.dot.width;
 
-            if (groupRanges[groupIds[i]].yAxisOrientation != 'right') {
-              yAxisLeftUsed = true;
-              minLeft = minLeft > minVal ? minVal : minLeft;
-              maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
-            }
-            else {
-              yAxisRightUsed = true;
-              minRight = minRight > minVal ? minVal : minRight;
-              maxRight = maxRight < maxVal ? maxVal : maxRight;
-            }
-          }
-        }
-      }
+    // reposition point
+    this.dom.point.style.left = this.left + 'px';
+  };
 
-      if (yAxisLeftUsed == true) {
-        this.yAxisLeft.setRange(minLeft, maxLeft);
-      }
-      if (yAxisRightUsed == true) {
-        this.yAxisRight.setRange(minRight, maxRight);
-      }
-    }
-    resized = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft)  || resized;
-    resized = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || resized;
+  /**
+   * Reposition the item vertically
+   * @Override
+   */
+  PointItem.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        point = this.dom.point;
 
-    if (yAxisRightUsed == true && yAxisLeftUsed == true) {
-      this.yAxisLeft.drawIcons = true;
-      this.yAxisRight.drawIcons = true;
+    if (orientation == 'top') {
+      point.style.top = this.top + 'px';
     }
     else {
-      this.yAxisLeft.drawIcons = false;
-      this.yAxisRight.drawIcons = false;
+      point.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
-    this.yAxisRight.master = !yAxisLeftUsed;
-    if (this.yAxisRight.master == false) {
-      if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
-      else                        {this.yAxisLeft.lineOffset = 0;}
+  };
 
-      resized = this.yAxisLeft.redraw() || resized;
-      this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
-      this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
-      resized = this.yAxisRight.redraw() || resized;
-    }
-    else {
-      resized = this.yAxisRight.redraw() || resized;
-    }
+  module.exports = PointItem;
 
-    // clean the accumulated lists
-    if (groupIds.indexOf('__barchartLeft') != -1) {
-      groupIds.splice(groupIds.indexOf('__barchartLeft'),1);
-    }
-    if (groupIds.indexOf('__barchartRight') != -1) {
-      groupIds.splice(groupIds.indexOf('__barchartRight'),1);
-    }
 
-    return resized;
-  };
+/***/ },
+/* 35 */
+/***/ function(module, exports, __webpack_require__) {
 
+  var Hammer = __webpack_require__(45);
+  var Item = __webpack_require__(31);
 
   /**
-   * This shows or hides the Y axis if needed. If there is a change, the changed event is emitted by the updateYAxis function
-   *
-   * @param {boolean} axisUsed
-   * @returns {boolean}
-   * @private
-   * @param axis
+   * @constructor RangeItem
+   * @extends Item
+   * @param {Object} data             Object containing parameters start, end
+   *                                  content, className.
+   * @param {{toScreen: function, toTime: function}} conversion
+   *                                  Conversion functions from time to screen and vice versa
+   * @param {Object} [options]        Configuration options
+   *                                  // TODO: describe options
    */
-  LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
-    var changed = false;
-    if (axisUsed == false) {
-      if (axis.dom.frame.parentNode && axis.hidden == false) {
-        axis.hide()
-        changed = true;
+  function RangeItem (data, conversion, options) {
+    this.props = {
+      content: {
+        width: 0
       }
-    }
-    else {
-      if (!axis.dom.frame.parentNode && axis.hidden == true) {
-        axis.show();
-        changed = true;
+    };
+    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
+
+    // validate data
+    if (data) {
+      if (data.start == undefined) {
+        throw new Error('Property "start" missing in item ' + data.id);
+      }
+      if (data.end == undefined) {
+        throw new Error('Property "end" missing in item ' + data.id);
       }
     }
-    return changed;
-  };
 
+    Item.call(this, data, conversion, options);
+  }
 
-  /**
-   * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
-   * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
-   * the yAxis.
-   *
-   * @param datapoints
-   * @returns {Array}
-   * @private
-   */
-  LineGraph.prototype._convertXcoordinates = function (datapoints) {
-    var extractedData = [];
-    var xValue, yValue;
-    var toScreen = this.body.util.toScreen;
+  RangeItem.prototype = new Item (null, null, null);
 
-    for (var i = 0; i < datapoints.length; i++) {
-      xValue = toScreen(datapoints[i].x) + this.props.width;
-      yValue = datapoints[i].y;
-      extractedData.push({x: xValue, y: yValue});
-    }
+  RangeItem.prototype.baseClassName = 'item range';
 
-    return extractedData;
+  /**
+   * Check whether this item is visible inside given range
+   * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+   * @returns {boolean} True if visible
+   */
+  RangeItem.prototype.isVisible = function(range) {
+    // determine visibility
+    return (this.data.start < range.end) && (this.data.end > range.start);
   };
 
-
   /**
-   * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
-   * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
-   * the yAxis.
-   *
-   * @param datapoints
-   * @param group
-   * @returns {Array}
-   * @private
+   * Repaint the item
    */
-  LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
-    var extractedData = [];
-    var xValue, yValue;
-    var toScreen = this.body.util.toScreen;
-    var axis = this.yAxisLeft;
-    var svgHeight = Number(this.svg.style.height.replace('px',''));
-    if (group.options.yAxisOrientation == 'right') {
-      axis = this.yAxisRight;
-    }
-
-    for (var i = 0; i < datapoints.length; i++) {
-      xValue = toScreen(datapoints[i].x) + this.props.width;
-      yValue = Math.round(axis.convertValue(datapoints[i].y));
-      extractedData.push({x: xValue, y: yValue});
-    }
+  RangeItem.prototype.redraw = function() {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-    group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
+        // background box
+      dom.box = document.createElement('div');
+      // className is updated in redraw()
 
-    return extractedData;
-  };
+      // contents box
+      dom.content = document.createElement('div');
+      dom.content.className = 'content';
+      dom.box.appendChild(dom.content);
 
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
 
-  module.exports = LineGraph;
+      this.dirty = true;
+    }
 
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
+    }
+    if (!dom.box.parentNode) {
+      var foreground = this.parent.dom.foreground;
+      if (!foreground) {
+        throw new Error('Cannot redraw item: parent has no foreground container element');
+      }
+      foreground.appendChild(dom.box);
+    }
+    this.displayed = true;
 
-/***/ },
-/* 35 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var util = __webpack_require__(1);
-  var Component = __webpack_require__(25);
-  var TimeStep = __webpack_require__(19);
-  var DateUtil = __webpack_require__(15);
-  var moment = __webpack_require__(44);
-
-  /**
-   * A horizontal time axis
-   * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
-   * @param {Object} [options]        See TimeAxis.setOptions for the available
-   *                                  options.
-   * @constructor TimeAxis
-   * @extends Component
-   */
-  function TimeAxis (body, options) {
-    this.dom = {
-      foreground: null,
-      lines: [],
-      majorTexts: [],
-      minorTexts: [],
-      redundant: {
-        lines: [],
-        majorTexts: [],
-        minorTexts: []
-      }
-    };
-    this.props = {
-      range: {
-        start: 0,
-        end: 0,
-        minimumStep: 0
-      },
-      lineTop: 0
-    };
-
-    this.defaultOptions = {
-      orientation: 'bottom',  // supported: 'top', 'bottom'
-      // TODO: implement timeaxis orientations 'left' and 'right'
-      showMinorLabels: true,
-      showMajorLabels: true,
-      format: null,
-      timeAxis: null
-    };
-    this.options = util.extend({}, this.defaultOptions);
-
-    this.body = body;
-
-    // create the HTML DOM
-    this._create();
+    // Update DOM when item is marked dirty. An item is marked dirty when:
+    // - the item is not yet rendered
+    // - the item's data is changed
+    // - the item is selected/deselected
+    if (this.dirty) {
+      this._updateContents(this.dom.content);
+      this._updateTitle(this.dom.box);
+      this._updateDataAttributes(this.dom.box);
+      this._updateStyle(this.dom.box);
 
-    this.setOptions(options);
-  }
+      // update class
+      var className = (this.data.className ? (' ' + this.data.className) : '') +
+          (this.selected ? ' selected' : '');
+      dom.box.className = this.baseClassName + className;
 
-  TimeAxis.prototype = new Component();
+      // determine from css whether this box has overflow
+      this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
 
-  /**
-   * Set options for the TimeAxis.
-   * Parameters will be merged in current options.
-   * @param {Object} options  Available options:
-   *                          {string} [orientation]
-   *                          {boolean} [showMinorLabels]
-   *                          {boolean} [showMajorLabels]
-   */
-  TimeAxis.prototype.setOptions = function(options) {
-    if (options) {
-      // copy all options that we know
-      util.selectiveExtend([
-        'orientation',
-        'showMinorLabels',
-        'showMajorLabels',
-        'hiddenDates',
-        'format',
-        'timeAxis'
-      ], this.options, options);
+      // recalculate size
+      // turn off max-width to be able to calculate the real width
+      // this causes an extra browser repaint/reflow, but so be it
+      this.dom.content.style.maxWidth = 'none';
+      this.props.content.width = this.dom.content.offsetWidth;
+      this.height = this.dom.box.offsetHeight;
+      this.dom.content.style.maxWidth = '';
 
-      // apply locale to moment.js
-      // TODO: not so nice, this is applied globally to moment.js
-      if ('locale' in options) {
-        if (typeof moment.locale === 'function') {
-          // moment.js 2.8.1+
-          moment.locale(options.locale);
-        }
-        else {
-          moment.lang(options.locale);
-        }
-      }
+      this.dirty = false;
     }
-  };
-
-  /**
-   * Create the HTML DOM for the TimeAxis
-   */
-  TimeAxis.prototype._create = function() {
-    this.dom.foreground = document.createElement('div');
-    this.dom.background = document.createElement('div');
 
-    this.dom.foreground.className = 'timeaxis foreground';
-    this.dom.background.className = 'timeaxis background';
+    this._repaintDeleteButton(dom.box);
+    this._repaintDragLeft();
+    this._repaintDragRight();
   };
 
   /**
-   * Destroy the TimeAxis
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  TimeAxis.prototype.destroy = function() {
-    // remove from DOM
-    if (this.dom.foreground.parentNode) {
-      this.dom.foreground.parentNode.removeChild(this.dom.foreground);
-    }
-    if (this.dom.background.parentNode) {
-      this.dom.background.parentNode.removeChild(this.dom.background);
+  RangeItem.prototype.show = function() {
+    if (!this.displayed) {
+      this.redraw();
     }
-
-    this.body = null;
   };
 
   /**
-   * Repaint the component
-   * @return {boolean} Returns true if the component is resized
+   * Hide the item from the DOM (when visible)
+   * @return {Boolean} changed
    */
-  TimeAxis.prototype.redraw = function () {
-    var options = this.options;
-    var props = this.props;
-    var foreground = this.dom.foreground;
-    var background = this.dom.background;
-
-    // determine the correct parent DOM element (depending on option orientation)
-    var parent = (options.orientation == 'top') ? this.body.dom.top : this.body.dom.bottom;
-    var parentChanged = (foreground.parentNode !== parent);
-
-    // calculate character width and height
-    this._calculateCharSize();
-
-    // TODO: recalculate sizes only needed when parent is resized or options is changed
-    var orientation = this.options.orientation,
-        showMinorLabels = this.options.showMinorLabels,
-        showMajorLabels = this.options.showMajorLabels;
-
-    // determine the width and height of the elemens for the axis
-    props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
-    props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
-    props.height = props.minorLabelHeight + props.majorLabelHeight;
-    props.width = foreground.offsetWidth;
-
-    props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
-        (options.orientation == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
-    props.minorLineWidth = 1; // TODO: really calculate width
-    props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
-    props.majorLineWidth = 1; // TODO: really calculate width
-
-    //  take foreground and background offline while updating (is almost twice as fast)
-    var foregroundNextSibling = foreground.nextSibling;
-    var backgroundNextSibling = background.nextSibling;
-    foreground.parentNode && foreground.parentNode.removeChild(foreground);
-    background.parentNode && background.parentNode.removeChild(background);
+  RangeItem.prototype.hide = function() {
+    if (this.displayed) {
+      var box = this.dom.box;
 
-    foreground.style.height = this.props.height + 'px';
+      if (box.parentNode) {
+        box.parentNode.removeChild(box);
+      }
 
-    this._repaintLabels();
+      this.top = null;
+      this.left = null;
 
-    // put DOM online again (at the same place)
-    if (foregroundNextSibling) {
-      parent.insertBefore(foreground, foregroundNextSibling);
-    }
-    else {
-      parent.appendChild(foreground)
-    }
-    if (backgroundNextSibling) {
-      this.body.dom.backgroundVertical.insertBefore(background, backgroundNextSibling);
-    }
-    else {
-      this.body.dom.backgroundVertical.appendChild(background)
+      this.displayed = false;
     }
-
-    return this._isResized() || parentChanged;
   };
 
   /**
-   * Repaint major and minor text labels and vertical grid lines
-   * @private
+   * Reposition the item horizontally
+   * @Override
    */
-  TimeAxis.prototype._repaintLabels = function () {
-    var orientation = this.options.orientation;
-
-    // calculate range and step (step such that we have space for 7 characters per label)
-    var start = util.convert(this.body.range.start, 'Number');
-    var end = util.convert(this.body.range.end, 'Number');
-    var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf();
-    var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.body.hiddenDates, this.body.range, timeLabelsize);
-    minimumStep -= this.body.util.toTime(0).valueOf();
+  RangeItem.prototype.repositionX = function() {
+    var parentWidth = this.parent.width;
+    var start = this.conversion.toScreen(this.data.start);
+    var end = this.conversion.toScreen(this.data.end);
+    var contentLeft;
+    var contentWidth;
 
-    var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.body.hiddenDates);
-    if (this.options.format) {
-      step.setFormat(this.options.format);
+    // limit the width of the this, as browsers cannot draw very wide divs
+    if (start < -parentWidth) {
+      start = -parentWidth;
     }
-    if (this.options.timeAxis) {
-      step.setScale(this.options.timeAxis);
+    if (end > 2 * parentWidth) {
+      end = 2 * parentWidth;
     }
-    this.step = step;
+    var boxWidth = Math.max(end - start, 1);
 
-    // Move all DOM elements to a "redundant" list, where they
-    // can be picked for re-use, and clear the lists with lines and texts.
-    // At the end of the function _repaintLabels, left over elements will be cleaned up
-    var dom = this.dom;
-    dom.redundant.lines = dom.lines;
-    dom.redundant.majorTexts = dom.majorTexts;
-    dom.redundant.minorTexts = dom.minorTexts;
-    dom.lines = [];
-    dom.majorTexts = [];
-    dom.minorTexts = [];
+    if (this.overflow) {
+      this.left = start;
+      this.width = boxWidth + this.props.content.width;
+      contentWidth = this.props.content.width;
 
-    var cur;
-    var x = 0;
-    var isMajor;
-    var xPrev = 0;
-    var width = 0;
-    var prevLine;
-    var xFirstMajorLabel = undefined;
-    var max = 0;
-    var className;
+      // Note: The calculation of width is an optimistic calculation, giving
+      //       a width which will not change when moving the Timeline
+      //       So no re-stacking needed, which is nicer for the eye;
+    }
+    else {
+      this.left = start;
+      this.width = boxWidth;
+      contentWidth = Math.min(end - start - 2 * this.options.padding, this.props.content.width);
+    }
 
-    step.first();
-    while (step.hasNext() && max < 1000) {
-      max++;
+    this.dom.box.style.left = this.left + 'px';
+    this.dom.box.style.width = boxWidth + 'px';
 
-      cur = step.getCurrent();
-      isMajor = step.isMajor();
-      className = step.getClassName();
+    switch (this.options.align) {
+      case 'left':
+        this.dom.content.style.left = '0';
+        break;
 
-      xPrev = x;
-      x = this.body.util.toScreen(cur);
-      width = x - xPrev;
-      if (prevLine) {
-        prevLine.style.width = width + 'px';
-      }
+      case 'right':
+        this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding), 0) + 'px';
+        break;
 
-      if (this.options.showMinorLabels) {
-        this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
-      }
+      case 'center':
+        this.dom.content.style.left = Math.max((boxWidth - contentWidth - 2 * this.options.padding) / 2, 0) + 'px';
+        break;
 
-      if (isMajor && this.options.showMajorLabels) {
-        if (x > 0) {
-          if (xFirstMajorLabel == undefined) {
-            xFirstMajorLabel = x;
+      default: // 'auto'
+        // when range exceeds left of the window, position the contents at the left of the visible area
+        if (this.overflow) {
+          if (end > 0) {
+            contentLeft = Math.max(-start, 0);
+          }
+          else {
+            contentLeft = -contentWidth; // ensure it's not visible anymore
           }
-          this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
         }
-        prevLine = this._repaintMajorLine(x, orientation, className);
-      }
-      else {
-        prevLine = this._repaintMinorLine(x, orientation, className);
-      }
-
-      step.next();
-    }
-
-    // create a major label on the left when needed
-    if (this.options.showMajorLabels) {
-      var leftTime = this.body.util.toTime(0),
-          leftText = step.getLabelMajor(leftTime),
-          widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
-
-      if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
-        this._repaintMajorText(0, leftText, orientation, className);
-      }
-    }
-
-    // Cleanup leftover DOM elements from the redundant list
-    util.forEach(this.dom.redundant, function (arr) {
-      while (arr.length) {
-        var elem = arr.pop();
-        if (elem && elem.parentNode) {
-          elem.parentNode.removeChild(elem);
+        else {
+          if (start < 0) {
+            contentLeft = Math.min(-start,
+                (end - start - contentWidth - 2 * this.options.padding));
+            // TODO: remove the need for options.padding. it's terrible.
+          }
+          else {
+            contentLeft = 0;
+          }
         }
-      }
-    });
-  };
-
-  /**
-   * Create a minor label for the axis at position x
-   * @param {Number} x
-   * @param {String} text
-   * @param {String} orientation   "top" or "bottom" (default)
-   * @param {String} className
-   * @private
-   */
-  TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
-    // reuse redundant label
-    var label = this.dom.redundant.minorTexts.shift();
-
-    if (!label) {
-      // create new label
-      var content = document.createTextNode('');
-      label = document.createElement('div');
-      label.appendChild(content);
-      this.dom.foreground.appendChild(label);
+        this.dom.content.style.left = contentLeft + 'px';
     }
-    this.dom.minorTexts.push(label);
-
-    label.childNodes[0].nodeValue = text;
-
-    label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
-    label.style.left = x + 'px';
-    label.className = 'text minor ' + className;
-    //label.title = title;  // TODO: this is a heavy operation
   };
 
   /**
-   * Create a Major label for the axis at position x
-   * @param {Number} x
-   * @param {String} text
-   * @param {String} orientation   "top" or "bottom" (default)
-   * @param {String} className
-   * @private
+   * Reposition the item vertically
+   * @Override
    */
-  TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className) {
-    // reuse redundant label
-    var label = this.dom.redundant.majorTexts.shift();
+  RangeItem.prototype.repositionY = function() {
+    var orientation = this.options.orientation,
+        box = this.dom.box;
 
-    if (!label) {
-      // create label
-      var content = document.createTextNode(text);
-      label = document.createElement('div');
-      label.appendChild(content);
-      this.dom.foreground.appendChild(label);
+    if (orientation == 'top') {
+      box.style.top = this.top + 'px';
+    }
+    else {
+      box.style.top = (this.parent.height - this.top - this.height) + 'px';
     }
-    this.dom.majorTexts.push(label);
-
-    label.childNodes[0].nodeValue = text;
-    label.className = 'text major ' + className;
-    //label.title = title; // TODO: this is a heavy operation
-
-    label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
-    label.style.left = x + 'px';
   };
 
   /**
-   * Create a minor line for the axis at position x
-   * @param {Number} x
-   * @param {String} orientation   "top" or "bottom" (default)
-   * @param {String} className
-   * @return {Element} Returns the created line
-   * @private
+   * Repaint a drag area on the left side of the range when the range is selected
+   * @protected
    */
-  TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
-    // reuse redundant line
-    var line = this.dom.redundant.lines.shift();
-    if (!line) {
-      // create vertical line
-      line = document.createElement('div');
-      this.dom.background.appendChild(line);
-    }
-    this.dom.lines.push(line);
+  RangeItem.prototype._repaintDragLeft = function () {
+    if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
+      // create and show drag area
+      var dragLeft = document.createElement('div');
+      dragLeft.className = 'drag-left';
+      dragLeft.dragLeftItem = this;
 
-    var props = this.props;
-    if (orientation == 'top') {
-      line.style.top = props.majorLabelHeight + 'px';
+      // TODO: this should be redundant?
+      Hammer(dragLeft, {
+        preventDefault: true
+      }).on('drag', function () {
+            //console.log('drag left')
+          });
+
+      this.dom.box.appendChild(dragLeft);
+      this.dom.dragLeft = dragLeft;
     }
-    else {
-      line.style.top = this.body.domProps.top.height + 'px';
+    else if (!this.selected && this.dom.dragLeft) {
+      // delete drag area
+      if (this.dom.dragLeft.parentNode) {
+        this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
+      }
+      this.dom.dragLeft = null;
     }
-    line.style.height = props.minorLineHeight + 'px';
-    line.style.left = (x - props.minorLineWidth / 2) + 'px';
-
-    line.className = 'grid vertical minor ' + className;
-
-    return line;
   };
 
   /**
-   * Create a Major line for the axis at position x
-   * @param {Number} x
-   * @param {String} orientation   "top" or "bottom" (default)
-   * @param {String} className
-   * @return {Element} Returns the created line
-   * @private
+   * Repaint a drag area on the right side of the range when the range is selected
+   * @protected
    */
-  TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
-    // reuse redundant line
-    var line = this.dom.redundant.lines.shift();
-    if (!line) {
-      // create vertical line
-      line = document.createElement('div');
-      this.dom.background.appendChild(line);
-    }
-    this.dom.lines.push(line);
+  RangeItem.prototype._repaintDragRight = function () {
+    if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
+      // create and show drag area
+      var dragRight = document.createElement('div');
+      dragRight.className = 'drag-right';
+      dragRight.dragRightItem = this;
 
-    var props = this.props;
-    if (orientation == 'top') {
-      line.style.top = '0';
+      // TODO: this should be redundant?
+      Hammer(dragRight, {
+        preventDefault: true
+      }).on('drag', function () {
+        //console.log('drag right')
+      });
+
+      this.dom.box.appendChild(dragRight);
+      this.dom.dragRight = dragRight;
     }
-    else {
-      line.style.top = this.body.domProps.top.height + 'px';
+    else if (!this.selected && this.dom.dragRight) {
+      // delete drag area
+      if (this.dom.dragRight.parentNode) {
+        this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
+      }
+      this.dom.dragRight = null;
     }
-    line.style.left = (x - props.majorLineWidth / 2) + 'px';
-    line.style.height = props.majorLineHeight + 'px';
-
-    line.className = 'grid vertical major ' + className;
-
-    return line;
   };
 
-  /**
-   * Determine the size of text on the axis (both major and minor axis).
-   * The size is calculated only once and then cached in this.props.
-   * @private
-   */
-  TimeAxis.prototype._calculateCharSize = function () {
-    // Note: We calculate char size with every redraw. Size may change, for
-    // example when any of the timelines parents had display:none for example.
-
-    // determine the char width and height on the minor axis
-    if (!this.dom.measureCharMinor) {
-      this.dom.measureCharMinor = document.createElement('DIV');
-      this.dom.measureCharMinor.className = 'text minor measure';
-      this.dom.measureCharMinor.style.position = 'absolute';
-
-      this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
-      this.dom.foreground.appendChild(this.dom.measureCharMinor);
-    }
-    this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight;
-    this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth;
-
-    // determine the char width and height on the major axis
-    if (!this.dom.measureCharMajor) {
-      this.dom.measureCharMajor = document.createElement('DIV');
-      this.dom.measureCharMajor.className = 'text major measure';
-      this.dom.measureCharMajor.style.position = 'absolute';
-
-      this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
-      this.dom.foreground.appendChild(this.dom.measureCharMajor);
-    }
-    this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight;
-    this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
-  };
-
-  /**
-   * Snap a date to a rounded value.
-   * The snap intervals are dependent on the current scale and step.
-   * @param {Date} date   the date to be snapped.
-   * @return {Date} snappedDate
-   */
-  TimeAxis.prototype.snap = function(date) {
-    return this.step.snap(date);
-  };
-
-  module.exports = TimeAxis;
+  module.exports = RangeItem;
 
 
 /***/ },
@@ -15470,7 +15492,7 @@ return /******/ (function(modules) { // webpackBootstrap
   var Hammer = __webpack_require__(45);
   var keycharm = __webpack_require__(57);
   var util = __webpack_require__(1);
-  var hammerUtil = __webpack_require__(47);
+  var hammerUtil = __webpack_require__(46);
   var DataSet = __webpack_require__(3);
   var DataView = __webpack_require__(4);
   var dotparser = __webpack_require__(42);
@@ -15480,12 +15502,12 @@ return /******/ (function(modules) { // webpackBootstrap
   var Node = __webpack_require__(40);
   var Edge = __webpack_require__(37);
   var Popup = __webpack_require__(41);
-  var MixinLoader = __webpack_require__(52);
-  var Activator = __webpack_require__(53);
-  var locales = __webpack_require__(54);
+  var MixinLoader = __webpack_require__(51);
+  var Activator = __webpack_require__(52);
+  var locales = __webpack_require__(49);
 
   // Load custom shapes into CanvasRenderingContext2D
-  __webpack_require__(55);
+  __webpack_require__(50);
 
   /**
    * @constructor Network
@@ -15537,7 +15559,12 @@ return /******/ (function(modules) { // webpackBootstrap
         fontFace: 'verdana',
         fontFill: undefined,
         fontStrokeWidth: 0, // px
-        fontStrokeColor: 'white',
+        fontStrokeColor: '#ffffff',
+        fontDrawThreshold: 3,
+        scaleFontWithValue: false,
+        fontSizeMin: 14,
+        fontSizeMax: 30,
+        fontSizeMaxVisible: 30,
         level: -1,
         color: {
             border: '#2B7CE9',
@@ -15567,6 +15594,7 @@ return /******/ (function(modules) { // webpackBootstrap
           highlight:'#848484',
           hover: '#848484'
         },
+        opacity:1.0,
         fontColor: '#343434',
         fontSize: 14, // px
         fontFace: 'arial',
@@ -15631,8 +15659,8 @@ return /******/ (function(modules) { // webpackBootstrap
                       height: 1,      // (px PNiC)             | growth of the height per node in cluster.
                       radius: 1},     // (px PNiC)             | growth of the radius per node in cluster.
         maxNodeSizeIncrements: 600,   // (# increments)        | max growth of the width  per node in cluster.
-        activeAreaBoxSize: 80,       // (px)                  | box area around the curser where clusters are popped open.
-        clusterLevelDifference: 2,
+        activeAreaBoxSize: 80,        // (px)                  | box area around the curser where clusters are popped open.
+        clusterLevelDifference: 2,    // used for normalization of the cluster levels
         clusterByZoom: true           // enable clustering through zooming in and out
       },
       navigation: {
@@ -15661,7 +15689,7 @@ return /******/ (function(modules) { // webpackBootstrap
         type: "continuous",
         roundness: 0.5
       },
-      maxVelocity:  30,
+      maxVelocity:  50,
       minVelocity:  0.1,   // px/s
       stabilize: true,  // stabilize before displaying the network
       stabilizationIterations: 1000,  // maximum number of iteration to stabilize
@@ -15814,7 +15842,7 @@ return /******/ (function(modules) { // webpackBootstrap
     else {
       // zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
       if (this.constants.stabilize == false) {
-        this.zoomExtent(undefined, true,this.constants.clustering.enabled);
+        this.zoomExtent({duration:0}, true, this.constants.clustering.enabled);
       }
     }
 
@@ -15874,17 +15902,45 @@ return /******/ (function(modules) { // webpackBootstrap
    * Find the center position of the network
    * @private
    */
-  Network.prototype._getRange = function() {
+  Network.prototype._getRange = function(specificNodes) {
     var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (minX > (node.boundingBox.left)) {minX = node.boundingBox.left;}
-        if (maxX < (node.boundingBox.right)) {maxX = node.boundingBox.right;}
-        if (minY > (node.boundingBox.bottom)) {minY = node.boundingBox.top;} // top is negative, bottom is positive
-        if (maxY < (node.boundingBox.top)) {maxY = node.boundingBox.bottom;} // top is negative, bottom is positive
+    if (specificNodes.length > 0) {
+      for (var i = 0; i < specificNodes.length; i++) {
+        node = this.nodes[specificNodes[i]];
+        if (minX > (node.boundingBox.left)) {
+          minX = node.boundingBox.left;
+        }
+        if (maxX < (node.boundingBox.right)) {
+          maxX = node.boundingBox.right;
+        }
+        if (minY > (node.boundingBox.bottom)) {
+          minY = node.boundingBox.top;
+        } // top is negative, bottom is positive
+        if (maxY < (node.boundingBox.top)) {
+          maxY = node.boundingBox.bottom;
+        } // top is negative, bottom is positive
+      }
+    }
+    else {
+      for (var nodeId in this.nodes) {
+        if (this.nodes.hasOwnProperty(nodeId)) {
+          node = this.nodes[nodeId];
+          if (minX > (node.boundingBox.left)) {
+            minX = node.boundingBox.left;
+          }
+          if (maxX < (node.boundingBox.right)) {
+            maxX = node.boundingBox.right;
+          }
+          if (minY > (node.boundingBox.bottom)) {
+            minY = node.boundingBox.top;
+          } // top is negative, bottom is positive
+          if (maxY < (node.boundingBox.top)) {
+            maxY = node.boundingBox.bottom;
+          } // top is negative, bottom is positive
+        }
       }
     }
+
     if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
       minY = 0, maxY = 0, minX = 0, maxX = 0;
     }
@@ -15909,17 +15965,37 @@ return /******/ (function(modules) { // webpackBootstrap
    * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
    * @param {Boolean} [disableStart] | If true, start is not called.
    */
-  Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableStart) {
+  Network.prototype.zoomExtent = function(options, initialZoom, disableStart) {
     this._redraw(true);
 
     if (initialZoom      === undefined) {initialZoom = false;}
     if (disableStart     === undefined) {disableStart = false;}
-    if (animationOptions === undefined) {animationOptions = false;}
+    if (options === undefined) {options = {nodes:[]};}
+    if (options.nodes === undefined) {
+      options.nodes = [];
+    }
 
-    var range = this._getRange();
+    var range;
     var zoomLevel;
 
     if (initialZoom == true) {
+      // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
+      var positionDefined = 0;
+      for (var nodeId in this.nodes) {
+        if (this.nodes.hasOwnProperty(nodeId)) {
+          var node = this.nodes[nodeId];
+          if (node.predefinedPosition == true) {
+            positionDefined += 1;
+          }
+        }
+      }
+      if (positionDefined > 0.5 * this.nodeIndices.length) {
+        this.zoomExtent(options,false,disableStart);
+        return;
+      }
+
+      range = this._getRange(options.nodes);
+
       var numberOfNodes = this.nodeIndices.length;
       if (this.constants.smoothCurves == true) {
         if (this.constants.clustering.enabled == true &&
@@ -15945,6 +16021,7 @@ return /******/ (function(modules) { // webpackBootstrap
       zoomLevel *= factor;
     }
     else {
+      range = this._getRange(options.nodes);
       var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
       var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
 
@@ -15960,7 +16037,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
     var center = this._findCenter(range);
     if (disableStart == false) {
-      var options = {position: center, scale: zoomLevel, animation: animationOptions};
+      var options = {position: center, scale: zoomLevel, animation: options};
       this.moveTo(options);
       this.moving = true;
       this.start();
@@ -16049,7 +16126,7 @@ return /******/ (function(modules) { // webpackBootstrap
       }
       else {
         // find a stable position or start animating to a stable position
-        if (this.constants.stabilize) {
+        if (this.constants.stabilize == true) {
           this._stabilize();
         }
       }
@@ -16200,7 +16277,7 @@ return /******/ (function(modules) { // webpackBootstrap
       // bind keys. If disabled, this will not do anything;
       this._createKeyBinds();
 
-
+      this._markAllEdgesAsDirty();
       this.setSize(this.constants.width, this.constants.height);
       this.moving = true;
       this.start();
@@ -17067,8 +17144,16 @@ return /******/ (function(modules) { // webpackBootstrap
     }
     this._updateNodeIndexList();
     this._updateValueRange(nodes);
+    this._markAllEdgesAsDirty();
   };
 
+
+  Network.prototype._markAllEdgesAsDirty = function() {
+    for (var edgeId in this.edges) {
+      this.edges[edgeId].colorDirty = true;
+    }
+  }
+
   /**
    * Remove existing nodes. If nodes do not exist, the method will just ignore it.
    * @param {Number[] | String[]} ids
@@ -17561,16 +17646,22 @@ return /******/ (function(modules) { // webpackBootstrap
     var count = 0;
     while (this.moving && count < this.constants.stabilizationIterations) {
       this._physicsTick();
+      if (count % 100 == 0) {
+        console.log("stabilizationIterations",count);
+      }
       count++;
     }
 
+
     if (this.constants.zoomExtentOnStabilize == true) {
-      this.zoomExtent(undefined, false, true);
+      this.zoomExtent({duration:0}, false, true);
     }
 
     if (this.constants.freezeForStabilization == true) {
       this._restoreFrozenNodes();
     }
+
+    this.emit("stabilizationIterationsDone");
   };
 
   /**
@@ -17620,8 +17711,10 @@ return /******/ (function(modules) { // webpackBootstrap
   Network.prototype._isMoving = function(vmin) {
     var nodes = this.nodes;
     for (var id in nodes) {
-      if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
-        return true;
+      if (nodes[id] !== undefined) {
+        if (nodes[id].isMoving(vmin) == true) {
+          return true;
+        }
       }
     }
     return false;
@@ -17704,11 +17797,12 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         // gather movement data from all sectors, if one moves, we are NOT stabilzied
-        for (var i = 0; i < mainMoving.length; i++) {mainMovingStatus = mainMoving[0] || mainMovingStatus;}
+        for (var i = 0; i < mainMoving.length; i++) {
+          mainMovingStatus = mainMoving[i] || mainMovingStatus;
+        }
 
         // determine if the network has stabilzied
         this.moving = mainMovingStatus || supportMovingStatus;
-
         if (this.moving == false) {
           this._revertPhysicsTick();
         }
@@ -17831,12 +17925,14 @@ return /******/ (function(modules) { // webpackBootstrap
   /**
    *  Freeze the _animationStep
    */
-  Network.prototype.toggleFreeze = function() {
-    if (this.freezeSimulation == false) {
+  Network.prototype.setFreezeSimulation = function(freeze) {
+    if (freeze == true) {
       this.freezeSimulation = true;
+      this.moving = false;
     }
     else {
       this.freezeSimulation = false;
+      this.moving = true;
       this.start();
     }
   };
@@ -18209,6 +18305,30 @@ return /******/ (function(modules) { // webpackBootstrap
     }
   }
 
+  Network.prototype.getConnectedNodes = function(nodeId) {
+    var nodeList = [];
+    if (this.nodes[nodeId] !== undefined) {
+      var node = this.nodes[nodeId];
+      var nodeObj = {nodeId : true}; // used to quickly check if node already exists
+      for (var i = 0; i < node.edges.length; i++) {
+        var edge = node.edges[i];
+        if (edge.toId == nodeId) {
+          if (nodeObj[edge.fromId] === undefined) {
+            nodeList.push(edge.fromId);
+            nodeObj[edge.fromId] = true;
+          }
+        }
+        else if (edge.fromId == nodeId) {
+          if (nodeObj[edge.toId] === undefined) {
+            nodeList.push(edge.toId)
+            nodeObj[edge.toId] = true;
+          }
+        }
+      }
+    }
+    return nodeList;
+  }
+
   module.exports = Network;
 
 
@@ -18258,6 +18378,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this.hover = false;
     this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
     this.dirtyLabel = true;
+    this.colorDirty = true;
 
     this.from = null;   // a node
     this.to = null;     // a node
@@ -18289,12 +18410,13 @@ return /******/ (function(modules) { // webpackBootstrap
    * @param {Object} constants   and object with default, global properties
    */
   Edge.prototype.setProperties = function(properties) {
+    this.colorDirty = true;
     if (!properties) {
       return;
     }
 
     var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
-      'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment'
+      'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment', 'opacity'
     ];
     util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -18321,7 +18443,9 @@ return /******/ (function(modules) { // webpackBootstrap
       }
     }
 
-    // A node is connected when it has a from and to node.
+
+
+      // A node is connected when it has a from and to node.
     this.connect();
 
     this.widthFixed = this.widthFixed || (properties.width !== undefined);
@@ -18337,9 +18461,9 @@ return /******/ (function(modules) { // webpackBootstrap
       case 'dash-line':     this.draw = this._drawDashLine; break;
       default:              this.draw = this._drawLine; break;
     }
-    
   };
 
+
   /**
    * Connect an edge to its nodes
    */
@@ -18448,19 +18572,23 @@ return /******/ (function(modules) { // webpackBootstrap
 
   Edge.prototype._getColor = function() {
     var colorObj = this.options.color;
-    if (this.options.inheritColor == "to") {
-      colorObj = {
-        highlight: this.to.options.color.highlight.border,
-        hover: this.to.options.color.hover.border,
-        color: this.to.options.color.border
-      };
-    }
-    else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
-      colorObj = {
-        highlight: this.from.options.color.highlight.border,
-        hover: this.from.options.color.hover.border,
-        color: this.from.options.color.border
-      };
+    if (this.colorDirty === true) {
+      if (this.options.inheritColor == "to") {
+        colorObj = {
+          highlight: this.to.options.color.highlight.border,
+          hover: this.to.options.color.hover.border,
+          color: util.overrideOpacity(this.from.options.color.border, this.options.opacity)
+        };
+      }
+      else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
+        colorObj = {
+          highlight: this.from.options.color.highlight.border,
+          hover: this.from.options.color.hover.border,
+          color: util.overrideOpacity(this.from.options.color.border, this.options.opacity)
+        };
+      }
+      this.options.color = colorObj;
+      this.colorDirty = false;
     }
 
     if (this.selected == true)   {return colorObj.highlight;}
@@ -19785,8 +19913,6 @@ return /******/ (function(modules) { // webpackBootstrap
     this.dynamicEdges = [];
     this.reroutedEdges = {};
 
-    this.fontDrawThreshold = 3;
-
     // set defaults for the properties
     this.id = undefined;
     this.allowedToMoveX = false;
@@ -19813,6 +19939,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this.vy = 0.0;  // velocity y
     this.x = null;
     this.y = null;
+    this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
 
     // used for reverting to previous position on stabilization
     this.previousState = {vx:0,vy:0,x:0,y:0};
@@ -19824,7 +19951,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
     // creating the variables for clustering
     this.resetCluster();
-    this.dynamicEdgesLength = 0;
     this.clusterSession = 0;
     this.clusterSizeWidthFactor  = networkConstants.clustering.nodeScaling.width;
     this.clusterSizeHeightFactor = networkConstants.clustering.nodeScaling.height;
@@ -19875,7 +20001,6 @@ return /******/ (function(modules) { // webpackBootstrap
     if (this.dynamicEdges.indexOf(edge) == -1) {
       this.dynamicEdges.push(edge);
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
   /**
@@ -19891,7 +20016,6 @@ return /******/ (function(modules) { // webpackBootstrap
     if (index != -1) {
       this.dynamicEdges.splice(index, 1);
     }
-    this.dynamicEdgesLength = this.dynamicEdges.length;
   };
 
 
@@ -19906,7 +20030,8 @@ return /******/ (function(modules) { // webpackBootstrap
     }
 
     var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
-      'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass'
+      'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
+      'scaleFontWithValue','fontSizeMaxVisible'
     ];
     util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -19914,8 +20039,8 @@ return /******/ (function(modules) { // webpackBootstrap
     if (properties.id !== undefined)        {this.id = properties.id;}
     if (properties.label !== undefined)     {this.label = properties.label; this.originalLabel = properties.label;}
     if (properties.title !== undefined)     {this.title = properties.title;}
-    if (properties.x !== undefined)         {this.x = properties.x;}
-    if (properties.y !== undefined)         {this.y = properties.y;}
+    if (properties.x !== undefined)         {this.x = properties.x; this.predefinedPosition = true;}
+    if (properties.y !== undefined)         {this.y = properties.y; this.predefinedPosition = true;}
     if (properties.value !== undefined)     {this.value = properties.value;}
     if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
@@ -20235,12 +20360,20 @@ return /******/ (function(modules) { // webpackBootstrap
     if (!this.radiusFixed && this.value !== undefined) {
       if (max == min) {
         this.options.radius= (this.options.radiusMin + this.options.radiusMax) / 2;
+        if (this.options.scaleFontWithValue == true) {
+          this.options.fontSize = (this.options.fontSizeMin + this.options.fontSizeMax) / 2;
+        }
       }
       else {
         var scale = (this.options.radiusMax - this.options.radiusMin) / (max - min);
-        this.options.radius= (this.value - min) * scale + this.options.radiusMin;
+        var fontScale = (this.options.fontSizeMax - this.options.fontSizeMin) / (max - min);
+        if (this.options.scaleFontWithValue == true) {
+          this.options.fontSize = Math.max(this.options.fontSizeMin ,(this.value - min) * fontScale + this.options.fontSizeMin);
+        }
+        this.options.radius= Math.max(this.options.radiusMin,(this.value - min) * scale + this.options.radiusMin); // max function is protection against value = 0
       }
     }
+
     this.baseRadiusValue = this.options.radius;
   };
 
@@ -20764,12 +20897,29 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
   Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-    if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) {
-      ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
+    var relativeFontSize = Number(this.options.fontSize) * this.networkScale;
+    if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) {
+      var fontSize = Number(this.options.fontSize);
+
+      // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
+      if (relativeFontSize >= this.options.fontSizeMaxVisible) {
+        fontSize = Number(this.options.fontSizeMaxVisible) * this.networkScaleInv;
+      }
+
+      // fade in when relative scale is between threshold and threshold - 1
+      var fontColor = this.options.fontColor || "#000000";
+      var strokecolor = this.options.fontStrokeColor;
+      if (relativeFontSize <= this.options.fontDrawThreshold) {
+        var opacity = Math.max(0,Math.min(1,1 - (this.options.fontDrawThreshold - relativeFontSize)));
+        fontColor   = util.overrideOpacity(fontColor,   opacity);
+        strokecolor = util.overrideOpacity(strokecolor, opacity);
+
+      }
+
+      ctx.font = (this.selected ? "bold " : "") + fontSize + "px " + this.options.fontFace;
 
       var lines = text.split('\n');
       var lineCount = lines.length;
-      var fontSize = Number(this.options.fontSize);
       var yLine = y + (1 - lineCount) / 2 * fontSize;
       if (labelUnderNode == true) {
         yLine = y + (1 - lineCount) / (2 * fontSize);
@@ -20781,7 +20931,7 @@ return /******/ (function(modules) { // webpackBootstrap
         var lineWidth = ctx.measureText(lines[i]).width;
         width = lineWidth > width ? lineWidth : width;
       }
-      var height = this.options.fontSize * lineCount;
+      var height = fontSize * lineCount;
       var left = x - width / 2;
       var top = y - height / 2;
       if (baseline == "hanging") {
@@ -20798,12 +20948,12 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       // draw text
-      ctx.fillStyle = this.options.fontColor || "black";
+      ctx.fillStyle = fontColor;
       ctx.textAlign = align || "center";
       ctx.textBaseline = baseline || "middle";
       if (this.options.fontStrokeWidth > 0){
         ctx.lineWidth   = this.options.fontStrokeWidth;
-        ctx.strokeStyle = this.options.fontStrokeColor;
+        ctx.strokeStyle = strokecolor;
         ctx.lineJoin    = 'round';
       }
       for (var i = 0; i < lineCount; i++) {
@@ -20819,10 +20969,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
   Node.prototype.getTextSize = function(ctx) {
     if (this.label !== undefined) {
-      ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
+      var fontSize = Number(this.options.fontSize);
+      if (fontSize * this.networkScale > this.options.fontSizeMaxVisible) {
+        fontSize = Number(this.options.fontSizeMaxVisible) * this.networkScaleInv;
+      }
+      ctx.font = (this.selected ? "bold " : "") + fontSize + "px " + this.options.fontFace;
 
       var lines = this.label.split('\n'),
-          height = (Number(this.options.fontSize) + 4) * lines.length,
+          height = (fontSize + 4) * lines.length,
           width = 0;
 
       for (var i = 0, iMax = lines.length; i < iMax; i++) {
@@ -21968,7 +22122,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   // first check if moment.js is already loaded in the browser window, if so,
   // use this instance. Else, load via commonjs.
-  module.exports = (typeof window !== 'undefined') && window['moment'] || __webpack_require__(58);
+  module.exports = (typeof window !== 'undefined') && window['moment'] || __webpack_require__(66);
 
 
 /***/ },
@@ -21978,7 +22132,7 @@ return /******/ (function(modules) { // webpackBootstrap
   // Only load hammer.js when in a browser environment
   // (loading hammer.js in a node.js environment gives errors)
   if (typeof window !== 'undefined') {
-    module.exports = window['Hammer'] || __webpack_require__(59);
+    module.exports = window['Hammer'] || __webpack_require__(65);
   }
   else {
     module.exports = function () {
@@ -21989,6 +22143,61 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ },
 /* 46 */
+/***/ function(module, exports, __webpack_require__) {
+
+  var Hammer = __webpack_require__(45);
+
+  /**
+   * Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
+   * @param {Element} element
+   * @param {Event} event
+   */
+  exports.fakeGesture = function(element, event) {
+    var eventType = null;
+
+    // for hammer.js 1.0.5
+    // var gesture = Hammer.event.collectEventData(this, eventType, event);
+
+    // for hammer.js 1.0.6+
+    var touches = Hammer.event.getTouchList(event, eventType);
+    var gesture = Hammer.event.collectEventData(this, eventType, touches, event);
+
+    // on IE in standards mode, no touches are recognized by hammer.js,
+    // resulting in NaN values for center.pageX and center.pageY
+    if (isNaN(gesture.center.pageX)) {
+      gesture.center.pageX = event.pageX;
+    }
+    if (isNaN(gesture.center.pageY)) {
+      gesture.center.pageY = event.pageY;
+    }
+
+    return gesture;
+  };
+
+
+/***/ },
+/* 47 */
+/***/ function(module, exports, __webpack_require__) {
+
+  // English
+  exports['en'] = {
+    current: 'current',
+    time: 'time'
+  };
+  exports['en_EN'] = exports['en'];
+  exports['en_US'] = exports['en'];
+
+  // Dutch
+  exports['nl'] = {
+    custom: 'aangepaste',
+    time: 'tijd'
+  };
+  exports['nl_NL'] = exports['nl'];
+  exports['nl_BE'] = exports['nl'];
+
+
+/***/ },
+/* 48 */
 /***/ function(module, exports, __webpack_require__) {
 
   var Emitter = __webpack_require__(56);
@@ -21997,8 +22206,8 @@ return /******/ (function(modules) { // webpackBootstrap
   var DataSet = __webpack_require__(3);
   var DataView = __webpack_require__(4);
   var Range = __webpack_require__(17);
-  var ItemSet = __webpack_require__(32);
-  var Activator = __webpack_require__(53);
+  var ItemSet = __webpack_require__(27);
+  var Activator = __webpack_require__(52);
   var DateUtil = __webpack_require__(15);
 
   /**
@@ -22866,577 +23075,288 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 47 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Hammer = __webpack_require__(45);
-
-  /**
-   * Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
-   * @param {Element} element
-   * @param {Event} event
-   */
-  exports.fakeGesture = function(element, event) {
-    var eventType = null;
-
-    // for hammer.js 1.0.5
-    // var gesture = Hammer.event.collectEventData(this, eventType, event);
-
-    // for hammer.js 1.0.6+
-    var touches = Hammer.event.getTouchList(event, eventType);
-    var gesture = Hammer.event.collectEventData(this, eventType, touches, event);
-
-    // on IE in standards mode, no touches are recognized by hammer.js,
-    // resulting in NaN values for center.pageX and center.pageY
-    if (isNaN(gesture.center.pageX)) {
-      gesture.center.pageX = event.pageX;
-    }
-    if (isNaN(gesture.center.pageY)) {
-      gesture.center.pageY = event.pageY;
-    }
-
-    return gesture;
-  };
-
-
-/***/ },
-/* 48 */
+/* 49 */
 /***/ function(module, exports, __webpack_require__) {
 
   // English
   exports['en'] = {
-    current: 'current',
-    time: 'time'
+    edit: 'Edit',
+    del: 'Delete selected',
+    back: 'Back',
+    addNode: 'Add Node',
+    addEdge: 'Add Edge',
+    editNode: 'Edit Node',
+    editEdge: 'Edit Edge',
+    addDescription: 'Click in an empty space to place a new node.',
+    edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
+    editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
+    createEdgeError: 'Cannot link edges to a cluster.',
+    deleteClusterError: 'Clusters cannot be deleted.'
   };
   exports['en_EN'] = exports['en'];
   exports['en_US'] = exports['en'];
 
   // Dutch
   exports['nl'] = {
-    custom: 'aangepaste',
-    time: 'tijd'
+    edit: 'Wijzigen',
+    del: 'Selectie verwijderen',
+    back: 'Terug',
+    addNode: 'Node toevoegen',
+    addEdge: 'Link toevoegen',
+    editNode: 'Node wijzigen',
+    editEdge: 'Link wijzigen',
+    addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
+    edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
+    editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
+    createEdgeError: 'Kan geen link maken naar een cluster.',
+    deleteClusterError: 'Clusters kunnen niet worden verwijderd.'
   };
   exports['nl_NL'] = exports['nl'];
   exports['nl_BE'] = exports['nl'];
 
 
 /***/ },
-/* 49 */
+/* 50 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Created by Alex on 11/11/2014.
+   * Canvas shapes used by Network
    */
-  var DOMutil = __webpack_require__(2);
-  var Points = __webpack_require__(51);
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
 
-  function Line(groupId, options) {
-    this.groupId = groupId;
-    this.options = options;
-  }
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+      this.beginPath();
+      this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
 
-  Line.prototype.getYRange = function(groupData) {
-    var yMin = groupData[0].y;
-    var yMax = groupData[0].y;
-    for (var j = 0; j < groupData.length; j++) {
-      yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
-      yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
-    }
-    return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
-  };
+    /**
+     * Draw a square shape
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   size, width and height of the square
+     */
+    CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+      this.beginPath();
+      this.rect(x - r, y - r, r * 2, r * 2);
+    };
 
+    /**
+     * Draw a triangle shape
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   radius, half the length of the sides of the triangle
+     */
+    CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+      // http://en.wikipedia.org/wiki/Equilateral_triangle
+      this.beginPath();
 
-  /**
-   * draw a line graph
-   *
-   * @param dataset
-   * @param group
-   */
-  Line.prototype.draw = function (dataset, group, framework) {
-    if (dataset != null) {
-      if (dataset.length > 0) {
-        var path, d;
-        var svgHeight = Number(framework.svg.style.height.replace('px',''));
-        path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
-        path.setAttributeNS(null, "class", group.className);
-        if(group.style !== undefined) {
-          path.setAttributeNS(null, "style", group.style);
-        }
+      var s = r * 2;
+      var s2 = s / 2;
+      var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
+      var h = Math.sqrt(s * s - s2 * s2); // height
 
-        // construct path from dataset
-        if (group.options.catmullRom.enabled == true) {
-          d = Line._catmullRom(dataset, group);
-        }
-        else {
-          d = Line._linear(dataset);
-        }
+      this.moveTo(x, y - (h - ir));
+      this.lineTo(x + s2, y + ir);
+      this.lineTo(x - s2, y + ir);
+      this.lineTo(x, y - (h - ir));
+      this.closePath();
+    };
 
-        // append with points for fill and finalize the path
-        if (group.options.shaded.enabled == true) {
-          var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
-          var dFill;
-          if (group.options.shaded.orientation == 'top') {
-            dFill = 'M' + dataset[0].x + ',' + 0 + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + 0;
-          }
-          else {
-            dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
-          }
-          fillPath.setAttributeNS(null, "class", group.className + " fill");
-          if(group.options.shaded.style !== undefined) {
-            fillPath.setAttributeNS(null, "style", group.options.shaded.style);
-          }
-          fillPath.setAttributeNS(null, "d", dFill);
-        }
-        // copy properties to path for drawing.
-        path.setAttributeNS(null, 'd', 'M' + d);
+    /**
+     * Draw a triangle shape in downward orientation
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r radius
+     */
+    CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+      // http://en.wikipedia.org/wiki/Equilateral_triangle
+      this.beginPath();
 
-        // draw points
-        if (group.options.drawPoints.enabled == true) {
-          Points.draw(dataset, group, framework);
-        }
-      }
-    }
-  };
+      var s = r * 2;
+      var s2 = s / 2;
+      var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
+      var h = Math.sqrt(s * s - s2 * s2); // height
 
+      this.moveTo(x, y + (h - ir));
+      this.lineTo(x + s2, y - ir);
+      this.lineTo(x - s2, y - ir);
+      this.lineTo(x, y + (h - ir));
+      this.closePath();
+    };
 
+    /**
+     * Draw a star shape, a star with 5 points
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   radius, half the length of the sides of the triangle
+     */
+    CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+      // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+      this.beginPath();
 
-  /**
-   * This uses an uniform parametrization of the CatmullRom algorithm:
-   * 'On the Parameterization of Catmull-Rom Curves' by Cem Yuksel et al.
-   * @param data
-   * @returns {string}
-   * @private
-   */
-  Line._catmullRomUniform = function(data) {
-    // catmull rom
-    var p0, p1, p2, p3, bp1, bp2;
-    var d = Math.round(data[0].x) + ',' + Math.round(data[0].y) + ' ';
-    var normalization = 1/6;
-    var length = data.length;
-    for (var i = 0; i < length - 1; i++) {
+      for (var n = 0; n < 10; n++) {
+        var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
+        this.lineTo(
+            x + radius * Math.sin(n * 2 * Math.PI / 10),
+            y - radius * Math.cos(n * 2 * Math.PI / 10)
+        );
+      }
 
-      p0 = (i == 0) ? data[0] : data[i-1];
-      p1 = data[i];
-      p2 = data[i+1];
-      p3 = (i + 2 < length) ? data[i+2] : p2;
+      this.closePath();
+    };
 
+    /**
+     * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+     */
+    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+      var r2d = Math.PI/180;
+      if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
+      if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+      this.beginPath();
+      this.moveTo(x+r,y);
+      this.lineTo(x+w-r,y);
+      this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
+      this.lineTo(x+w,y+h-r);
+      this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
+      this.lineTo(x+r,y+h);
+      this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
+      this.lineTo(x,y+r);
+      this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+    };
 
-      // Catmull-Rom to Cubic Bezier conversion matrix
-      //    0       1       0       0
-      //  -1/6      1      1/6      0
-      //    0      1/6      1     -1/6
-      //    0       0       1       0
+    /**
+     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+     */
+    CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+      var kappa = .5522848,
+          ox = (w / 2) * kappa, // control point offset horizontal
+          oy = (h / 2) * kappa, // control point offset vertical
+          xe = x + w,           // x-end
+          ye = y + h,           // y-end
+          xm = x + w / 2,       // x-middle
+          ym = y + h / 2;       // y-middle
 
-      //    bp0 = { x: p1.x,                               y: p1.y };
-      bp1 = { x: ((-p0.x + 6*p1.x + p2.x) *normalization), y: ((-p0.y + 6*p1.y + p2.y) *normalization)};
-      bp2 = { x: (( p1.x + 6*p2.x - p3.x) *normalization), y: (( p1.y + 6*p2.y - p3.y) *normalization)};
-      //    bp0 = { x: p2.x,                               y: p2.y };
+      this.beginPath();
+      this.moveTo(x, ym);
+      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+    };
 
-      d += 'C' +
-      bp1.x + ',' +
-      bp1.y + ' ' +
-      bp2.x + ',' +
-      bp2.y + ' ' +
-      p2.x + ',' +
-      p2.y + ' ';
-    }
 
-    return d;
-  };
 
-  /**
-   * This uses either the chordal or centripetal parameterization of the catmull-rom algorithm.
-   * By default, the centripetal parameterization is used because this gives the nicest results.
-   * These parameterizations are relatively heavy because the distance between 4 points have to be calculated.
-   *
-   * One optimization can be used to reuse distances since this is a sliding window approach.
-   * @param data
-   * @param group
-   * @returns {string}
-   * @private
-   */
-  Line._catmullRom = function(data, group) {
-    var alpha = group.options.catmullRom.alpha;
-    if (alpha == 0 || alpha === undefined) {
-      return this._catmullRomUniform(data);
-    }
-    else {
-      var p0, p1, p2, p3, bp1, bp2, d1,d2,d3, A, B, N, M;
-      var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
-      var d = Math.round(data[0].x) + ',' + Math.round(data[0].y) + ' ';
-      var length = data.length;
-      for (var i = 0; i < length - 1; i++) {
+    /**
+     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+     */
+    CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
+      var f = 1/3;
+      var wEllipse = w;
+      var hEllipse = h * f;
 
-        p0 = (i == 0) ? data[0] : data[i-1];
-        p1 = data[i];
-        p2 = data[i+1];
-        p3 = (i + 2 < length) ? data[i+2] : p2;
+      var kappa = .5522848,
+          ox = (wEllipse / 2) * kappa, // control point offset horizontal
+          oy = (hEllipse / 2) * kappa, // control point offset vertical
+          xe = x + wEllipse,           // x-end
+          ye = y + hEllipse,           // y-end
+          xm = x + wEllipse / 2,       // x-middle
+          ym = y + hEllipse / 2,       // y-middle
+          ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
+          yeb = y + h;                 // y-end, bottom ellipse
 
-        d1 = Math.sqrt(Math.pow(p0.x - p1.x,2) + Math.pow(p0.y - p1.y,2));
-        d2 = Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2));
-        d3 = Math.sqrt(Math.pow(p2.x - p3.x,2) + Math.pow(p2.y - p3.y,2));
+      this.beginPath();
+      this.moveTo(xe, ym);
 
-        // Catmull-Rom to Cubic Bezier conversion matrix
+      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
 
-        // A = 2d1^2a + 3d1^a * d2^a + d3^2a
-        // B = 2d3^2a + 3d3^a * d2^a + d2^2a
+      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
 
-        // [   0             1            0          0          ]
-        // [   -d2^2a /N     A/N          d1^2a /N   0          ]
-        // [   0             d3^2a /M     B/M        -d2^2a /M  ]
-        // [   0             0            1          0          ]
+      this.lineTo(xe, ymb);
 
-        d3powA  = Math.pow(d3,  alpha);
-        d3pow2A = Math.pow(d3,2*alpha);
-        d2powA  = Math.pow(d2,  alpha);
-        d2pow2A = Math.pow(d2,2*alpha);
-        d1powA  = Math.pow(d1,  alpha);
-        d1pow2A = Math.pow(d1,2*alpha);
+      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
 
-        A = 2*d1pow2A + 3*d1powA * d2powA + d2pow2A;
-        B = 2*d3pow2A + 3*d3powA * d2powA + d2pow2A;
-        N = 3*d1powA * (d1powA + d2powA);
-        if (N > 0) {N = 1 / N;}
-        M = 3*d3powA * (d3powA + d2powA);
-        if (M > 0) {M = 1 / M;}
-
-        bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
-          y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
-
-        bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
-          y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
-
-        if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;}
-        if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;}
-        d += 'C' +
-        bp1.x + ',' +
-        bp1.y + ' ' +
-        bp2.x + ',' +
-        bp2.y + ' ' +
-        p2.x + ',' +
-        p2.y + ' ';
-      }
-
-      return d;
-    }
-  };
-
-  /**
-   * this generates the SVG path for a linear drawing between datapoints.
-   * @param data
-   * @returns {string}
-   * @private
-   */
-  Line._linear = function(data) {
-    // linear
-    var d = '';
-    for (var i = 0; i < data.length; i++) {
-      if (i == 0) {
-        d += data[i].x + ',' + data[i].y;
-      }
-      else {
-        d += ' ' + data[i].x + ',' + data[i].y;
-      }
-    }
-    return d;
-  };
-
-  module.exports = Line;
-
-
-/***/ },
-/* 50 */
-/***/ function(module, exports, __webpack_require__) {
-
-  /**
-   * Created by Alex on 11/11/2014.
-   */
-  var DOMutil = __webpack_require__(2);
-  var Points = __webpack_require__(51);
-
-  function Bargraph(groupId, options) {
-    this.groupId = groupId;
-    this.options = options;
-  }
-
-  Bargraph.prototype.getYRange = function(groupData) {
-    if (this.options.barChart.handleOverlap != 'stack') {
-      var yMin = groupData[0].y;
-      var yMax = groupData[0].y;
-      for (var j = 0; j < groupData.length; j++) {
-        yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
-        yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
-      }
-      return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
-    }
-    else {
-      var barCombinedData = [];
-      for (var j = 0; j < groupData.length; j++) {
-        barCombinedData.push({
-          x: groupData[j].x,
-          y: groupData[j].y,
-          groupId: this.groupId
-        });
-      }
-      return barCombinedData;
-    }
-  };
-
-
-
-  /**
-   * draw a bar graph
-   *
-   * @param groupIds
-   * @param processedGroupData
-   */
-  Bargraph.draw = function (groupIds, processedGroupData, framework) {
-    var combinedData = [];
-    var intersections = {};
-    var coreDistance;
-    var key, drawData;
-    var group;
-    var i,j;
-    var barPoints = 0;
-
-    // combine all barchart data
-    for (i = 0; i < groupIds.length; i++) {
-      group = framework.groups[groupIds[i]];
-      if (group.options.style == 'bar') {
-        if (group.visible == true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.options.groups.visibility[groupIds[i]] == true)) {
-          for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
-            combinedData.push({
-              x: processedGroupData[groupIds[i]][j].x,
-              y: processedGroupData[groupIds[i]][j].y,
-              groupId: groupIds[i]
-            });
-            barPoints += 1;
-          }
-        }
-      }
-    }
-
-    if (barPoints == 0) {return;}
-
-    // sort by time and by group
-    combinedData.sort(function (a, b) {
-      if (a.x == b.x) {
-        return a.groupId - b.groupId;
-      } else {
-        return a.x - b.x;
-      }
-    });
-
-    // get intersections
-    Bargraph._getDataIntersections(intersections, combinedData);
-
-    // plot barchart
-    for (i = 0; i < combinedData.length; i++) {
-      group = framework.groups[combinedData[i].groupId];
-      var minWidth = 0.1 * group.options.barChart.width;
+      this.lineTo(x, ym);
+    };
 
-      key = combinedData[i].x;
-      var heightOffset = 0;
-      if (intersections[key] === undefined) {
-        if (i+1 < combinedData.length) {coreDistance = Math.abs(combinedData[i+1].x - key);}
-        if (i > 0)                     {coreDistance = Math.min(coreDistance,Math.abs(combinedData[i-1].x - key));}
-        drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
-      }
-      else {
-        var nextKey = i + (intersections[key].amount - intersections[key].resolved);
-        var prevKey = i - (intersections[key].resolved + 1);
-        if (nextKey < combinedData.length) {coreDistance = Math.abs(combinedData[nextKey].x - key);}
-        if (prevKey > 0)                   {coreDistance = Math.min(coreDistance,Math.abs(combinedData[prevKey].x - key));}
-        drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
-        intersections[key].resolved += 1;
 
-        if (group.options.barChart.handleOverlap == 'stack') {
-          heightOffset = intersections[key].accumulated;
-          intersections[key].accumulated += group.zeroPosition - combinedData[i].y;
-        }
-        else if (group.options.barChart.handleOverlap == 'sideBySide') {
-          drawData.width = drawData.width / intersections[key].amount;
-          drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1));
-          if (group.options.barChart.align == 'left')       {drawData.offset -= 0.5*drawData.width;}
-          else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
-        }
-      }
-      DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
-      // draw points
-      if (group.options.drawPoints.enabled == true) {
-        DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
-      }
-    }
-  };
+    /**
+     * Draw an arrow point (no line)
+     */
+    CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+      // tail
+      var xt = x - length * Math.cos(angle);
+      var yt = y - length * Math.sin(angle);
 
+      // inner tail
+      // TODO: allow to customize different shapes
+      var xi = x - length * 0.9 * Math.cos(angle);
+      var yi = y - length * 0.9 * Math.sin(angle);
 
-  /**
-   * Fill the intersections object with counters of how many datapoints share the same x coordinates
-   * @param intersections
-   * @param combinedData
-   * @private
-   */
-  Bargraph._getDataIntersections = function (intersections, combinedData) {
-    // get intersections
-    var coreDistance;
-    for (var i = 0; i < combinedData.length; i++) {
-      if (i + 1 < combinedData.length) {
-        coreDistance = Math.abs(combinedData[i + 1].x - combinedData[i].x);
-      }
-      if (i > 0) {
-        coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x));
-      }
-      if (coreDistance == 0) {
-        if (intersections[combinedData[i].x] === undefined) {
-          intersections[combinedData[i].x] = {amount: 0, resolved: 0, accumulated: 0};
-        }
-        intersections[combinedData[i].x].amount += 1;
-      }
-    }
-  };
+      // left
+      var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+      var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
 
+      // right
+      var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+      var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
 
-  /**
-   * Get the width and offset for bargraphs based on the coredistance between datapoints
-   *
-   * @param coreDistance
-   * @param group
-   * @param minWidth
-   * @returns {{width: Number, offset: Number}}
-   * @private
-   */
-  Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
-    var width, offset;
-    if (coreDistance < group.options.barChart.width && coreDistance > 0) {
-      width = coreDistance < minWidth ? minWidth : coreDistance;
+      this.beginPath();
+      this.moveTo(x, y);
+      this.lineTo(xl, yl);
+      this.lineTo(xi, yi);
+      this.lineTo(xr, yr);
+      this.closePath();
+    };
 
-      offset = 0; // recalculate offset with the new width;
-      if (group.options.barChart.align == 'left') {
-        offset -= 0.5 * coreDistance;
-      }
-      else if (group.options.barChart.align == 'right') {
-        offset += 0.5 * coreDistance;
-      }
-    }
-    else {
-      // default settings
-      width = group.options.barChart.width;
-      offset = 0;
-      if (group.options.barChart.align == 'left') {
-        offset -= 0.5 * group.options.barChart.width;
-      }
-      else if (group.options.barChart.align == 'right') {
-        offset += 0.5 * group.options.barChart.width;
+    /**
+     * Sets up the dashedLine functionality for drawing
+     * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+     * @author David Jordan
+     * @date 2012-08-08
+     */
+    CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+      if (!dashArray) dashArray=[10,5];
+      if (dashLength==0) dashLength = 0.001; // Hack for Safari
+      var dashCount = dashArray.length;
+      this.moveTo(x, y);
+      var dx = (x2-x), dy = (y2-y);
+      var slope = dy/dx;
+      var distRemaining = Math.sqrt( dx*dx + dy*dy );
+      var dashIndex=0, draw=true;
+      while (distRemaining>=0.1){
+        var dashLength = dashArray[dashIndex++%dashCount];
+        if (dashLength > distRemaining) dashLength = distRemaining;
+        var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
+        if (dx<0) xStep = -xStep;
+        x += xStep;
+        y += slope*xStep;
+        this[draw ? 'lineTo' : 'moveTo'](x,y);
+        distRemaining -= dashLength;
+        draw = !draw;
       }
-    }
-
-    return {width: width, offset: offset};
-  };
-
-  Bargraph.getStackedBarYRange = function(barCombinedData, groupRanges, groupIds, groupLabel, orientation) {
-    if (barCombinedData.length > 0) {
-      // sort by time and by group
-      barCombinedData.sort(function (a, b) {
-        if (a.x == b.x) {
-          return a.groupId - b.groupId;
-        } else {
-          return a.x - b.x;
-        }
-      });
-      var intersections = {};
+    };
 
-      Bargraph._getDataIntersections(intersections, barCombinedData);
-      groupRanges[groupLabel] = Bargraph._getStackedBarYRange(intersections, barCombinedData);
-      groupRanges[groupLabel].yAxisOrientation = orientation;
-      groupIds.push(groupLabel);
-    }
+    // TODO: add diamond shape
   }
 
-  Bargraph._getStackedBarYRange = function (intersections, combinedData) {
-    var key;
-    var yMin = combinedData[0].y;
-    var yMax = combinedData[0].y;
-    for (var i = 0; i < combinedData.length; i++) {
-      key = combinedData[i].x;
-      if (intersections[key] === undefined) {
-        yMin = yMin > combinedData[i].y ? combinedData[i].y : yMin;
-        yMax = yMax < combinedData[i].y ? combinedData[i].y : yMax;
-      }
-      else {
-        intersections[key].accumulated += combinedData[i].y;
-      }
-    }
-    for (var xpos in intersections) {
-      if (intersections.hasOwnProperty(xpos)) {
-        yMin = yMin > intersections[xpos].accumulated ? intersections[xpos].accumulated : yMin;
-        yMax = yMax < intersections[xpos].accumulated ? intersections[xpos].accumulated : yMax;
-      }
-    }
-
-    return {min: yMin, max: yMax};
-  };
-
-  module.exports = Bargraph;
 
 /***/ },
 /* 51 */
 /***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * Created by Alex on 11/11/2014.
-   */
-  var DOMutil = __webpack_require__(2);
-
-  function Points(groupId, options) {
-    this.groupId = groupId;
-    this.options = options;
-  }
-
-
-  Points.prototype.getYRange = function(groupData) {
-    var yMin = groupData[0].y;
-    var yMax = groupData[0].y;
-    for (var j = 0; j < groupData.length; j++) {
-      yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
-      yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
-    }
-    return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
-  };
-
-  Points.prototype.draw = function(dataset, group, framework, offset) {
-    Points.draw(dataset, group, framework, offset);
-  }
-
-  /**
-   * draw the data points
-   *
-   * @param {Array} dataset
-   * @param {Object} JSONcontainer
-   * @param {Object} svg            | SVG DOM element
-   * @param {GraphGroup} group
-   * @param {Number} [offset]
-   */
-  Points.draw = function (dataset, group, framework, offset) {
-    if (offset === undefined) {offset = 0;}
-    for (var i = 0; i < dataset.length; i++) {
-      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, framework.svgElements, framework.svg);
-    }
-  };
-
-
-  module.exports = Points;
-
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var PhysicsMixin = __webpack_require__(60);
-  var ClusterMixin = __webpack_require__(61);
-  var SectorsMixin = __webpack_require__(62);
-  var SelectionMixin = __webpack_require__(63);
-  var ManipulationMixin = __webpack_require__(64);
-  var NavigationMixin = __webpack_require__(65);
-  var HierarchicalLayoutMixin = __webpack_require__(66);
+  var PhysicsMixin = __webpack_require__(64);
+  var ClusterMixin = __webpack_require__(58);
+  var SectorsMixin = __webpack_require__(59);
+  var SelectionMixin = __webpack_require__(60);
+  var ManipulationMixin = __webpack_require__(61);
+  var NavigationMixin = __webpack_require__(62);
+  var HierarchicalLayoutMixin = __webpack_require__(63);
 
   /**
    * Load a mixin into the network object
@@ -23631,7 +23551,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 53 */
+/* 52 */
 /***/ function(module, exports, __webpack_require__) {
 
   var keycharm = __webpack_require__(57);
@@ -23788,428 +23708,662 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 54 */
+/* 53 */
 /***/ function(module, exports, __webpack_require__) {
 
-  // English
-  exports['en'] = {
-    edit: 'Edit',
-    del: 'Delete selected',
-    back: 'Back',
-    addNode: 'Add Node',
-    addEdge: 'Add Edge',
-    editNode: 'Edit Node',
-    editEdge: 'Edit Edge',
-    addDescription: 'Click in an empty space to place a new node.',
-    edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
-    editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
-    createEdgeError: 'Cannot link edges to a cluster.',
-    deleteClusterError: 'Clusters cannot be deleted.'
-  };
-  exports['en_EN'] = exports['en'];
-  exports['en_US'] = exports['en'];
+  /**
+   * Created by Alex on 11/11/2014.
+   */
+  var DOMutil = __webpack_require__(2);
+  var Points = __webpack_require__(55);
 
-  // Dutch
-  exports['nl'] = {
-    edit: 'Wijzigen',
-    del: 'Selectie verwijderen',
-    back: 'Terug',
-    addNode: 'Node toevoegen',
-    addEdge: 'Link toevoegen',
-    editNode: 'Node wijzigen',
-    editEdge: 'Link wijzigen',
-    addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
-    edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
-    editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
-    createEdgeError: 'Kan geen link maken naar een cluster.',
-    deleteClusterError: 'Clusters kunnen niet worden verwijderd.'
+  function Bargraph(groupId, options) {
+    this.groupId = groupId;
+    this.options = options;
+  }
+
+  Bargraph.prototype.getYRange = function(groupData) {
+    if (this.options.barChart.handleOverlap != 'stack') {
+      var yMin = groupData[0].y;
+      var yMax = groupData[0].y;
+      for (var j = 0; j < groupData.length; j++) {
+        yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+        yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
+      }
+      return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
+    }
+    else {
+      var barCombinedData = [];
+      for (var j = 0; j < groupData.length; j++) {
+        barCombinedData.push({
+          x: groupData[j].x,
+          y: groupData[j].y,
+          groupId: this.groupId
+        });
+      }
+      return barCombinedData;
+    }
   };
-  exports['nl_NL'] = exports['nl'];
-  exports['nl_BE'] = exports['nl'];
 
 
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
 
   /**
-   * Canvas shapes used by Network
+   * draw a bar graph
+   *
+   * @param groupIds
+   * @param processedGroupData
    */
-  if (typeof CanvasRenderingContext2D !== 'undefined') {
+  Bargraph.draw = function (groupIds, processedGroupData, framework) {
+    var combinedData = [];
+    var intersections = {};
+    var coreDistance;
+    var key, drawData;
+    var group;
+    var i,j;
+    var barPoints = 0;
 
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-      this.beginPath();
-      this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
+    // combine all barchart data
+    for (i = 0; i < groupIds.length; i++) {
+      group = framework.groups[groupIds[i]];
+      if (group.options.style == 'bar') {
+        if (group.visible == true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.options.groups.visibility[groupIds[i]] == true)) {
+          for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
+            combinedData.push({
+              x: processedGroupData[groupIds[i]][j].x,
+              y: processedGroupData[groupIds[i]][j].y,
+              groupId: groupIds[i]
+            });
+            barPoints += 1;
+          }
+        }
+      }
+    }
 
-    /**
-     * Draw a square shape
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   size, width and height of the square
-     */
-    CanvasRenderingContext2D.prototype.square = function(x, y, r) {
-      this.beginPath();
-      this.rect(x - r, y - r, r * 2, r * 2);
-    };
+    if (barPoints == 0) {return;}
 
-    /**
-     * Draw a triangle shape
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   radius, half the length of the sides of the triangle
-     */
-    CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
-      // http://en.wikipedia.org/wiki/Equilateral_triangle
-      this.beginPath();
+    // sort by time and by group
+    combinedData.sort(function (a, b) {
+      if (a.x == b.x) {
+        return a.groupId - b.groupId;
+      } else {
+        return a.x - b.x;
+      }
+    });
 
-      var s = r * 2;
-      var s2 = s / 2;
-      var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
-      var h = Math.sqrt(s * s - s2 * s2); // height
+    // get intersections
+    Bargraph._getDataIntersections(intersections, combinedData);
 
-      this.moveTo(x, y - (h - ir));
-      this.lineTo(x + s2, y + ir);
-      this.lineTo(x - s2, y + ir);
-      this.lineTo(x, y - (h - ir));
-      this.closePath();
-    };
-
-    /**
-     * Draw a triangle shape in downward orientation
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r radius
-     */
-    CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
-      // http://en.wikipedia.org/wiki/Equilateral_triangle
-      this.beginPath();
-
-      var s = r * 2;
-      var s2 = s / 2;
-      var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
-      var h = Math.sqrt(s * s - s2 * s2); // height
-
-      this.moveTo(x, y + (h - ir));
-      this.lineTo(x + s2, y - ir);
-      this.lineTo(x - s2, y - ir);
-      this.lineTo(x, y + (h - ir));
-      this.closePath();
-    };
-
-    /**
-     * Draw a star shape, a star with 5 points
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   radius, half the length of the sides of the triangle
-     */
-    CanvasRenderingContext2D.prototype.star = function(x, y, r) {
-      // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
-      this.beginPath();
+    // plot barchart
+    for (i = 0; i < combinedData.length; i++) {
+      group = framework.groups[combinedData[i].groupId];
+      var minWidth = 0.1 * group.options.barChart.width;
 
-      for (var n = 0; n < 10; n++) {
-        var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
-        this.lineTo(
-            x + radius * Math.sin(n * 2 * Math.PI / 10),
-            y - radius * Math.cos(n * 2 * Math.PI / 10)
-        );
+      key = combinedData[i].x;
+      var heightOffset = 0;
+      if (intersections[key] === undefined) {
+        if (i+1 < combinedData.length) {coreDistance = Math.abs(combinedData[i+1].x - key);}
+        if (i > 0)                     {coreDistance = Math.min(coreDistance,Math.abs(combinedData[i-1].x - key));}
+        drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
       }
+      else {
+        var nextKey = i + (intersections[key].amount - intersections[key].resolved);
+        var prevKey = i - (intersections[key].resolved + 1);
+        if (nextKey < combinedData.length) {coreDistance = Math.abs(combinedData[nextKey].x - key);}
+        if (prevKey > 0)                   {coreDistance = Math.min(coreDistance,Math.abs(combinedData[prevKey].x - key));}
+        drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
+        intersections[key].resolved += 1;
 
-      this.closePath();
-    };
-
-    /**
-     * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
-     */
-    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
-      var r2d = Math.PI/180;
-      if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
-      if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
-      this.beginPath();
-      this.moveTo(x+r,y);
-      this.lineTo(x+w-r,y);
-      this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
-      this.lineTo(x+w,y+h-r);
-      this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
-      this.lineTo(x+r,y+h);
-      this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
-      this.lineTo(x,y+r);
-      this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
-    };
-
-    /**
-     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-     */
-    CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
-      var kappa = .5522848,
-          ox = (w / 2) * kappa, // control point offset horizontal
-          oy = (h / 2) * kappa, // control point offset vertical
-          xe = x + w,           // x-end
-          ye = y + h,           // y-end
-          xm = x + w / 2,       // x-middle
-          ym = y + h / 2;       // y-middle
-
-      this.beginPath();
-      this.moveTo(x, ym);
-      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-    };
-
-
-
-    /**
-     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-     */
-    CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
-      var f = 1/3;
-      var wEllipse = w;
-      var hEllipse = h * f;
-
-      var kappa = .5522848,
-          ox = (wEllipse / 2) * kappa, // control point offset horizontal
-          oy = (hEllipse / 2) * kappa, // control point offset vertical
-          xe = x + wEllipse,           // x-end
-          ye = y + hEllipse,           // y-end
-          xm = x + wEllipse / 2,       // x-middle
-          ym = y + hEllipse / 2,       // y-middle
-          ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
-          yeb = y + h;                 // y-end, bottom ellipse
-
-      this.beginPath();
-      this.moveTo(xe, ym);
-
-      this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-      this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-
-      this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-      this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-
-      this.lineTo(xe, ymb);
-
-      this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-      this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
-
-      this.lineTo(x, ym);
-    };
-
-
-    /**
-     * Draw an arrow point (no line)
-     */
-    CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
-      // tail
-      var xt = x - length * Math.cos(angle);
-      var yt = y - length * Math.sin(angle);
-
-      // inner tail
-      // TODO: allow to customize different shapes
-      var xi = x - length * 0.9 * Math.cos(angle);
-      var yi = y - length * 0.9 * Math.sin(angle);
-
-      // left
-      var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
-      var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
-
-      // right
-      var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
-      var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
-
-      this.beginPath();
-      this.moveTo(x, y);
-      this.lineTo(xl, yl);
-      this.lineTo(xi, yi);
-      this.lineTo(xr, yr);
-      this.closePath();
-    };
-
-    /**
-     * Sets up the dashedLine functionality for drawing
-     * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
-     * @author David Jordan
-     * @date 2012-08-08
-     */
-    CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
-      if (!dashArray) dashArray=[10,5];
-      if (dashLength==0) dashLength = 0.001; // Hack for Safari
-      var dashCount = dashArray.length;
-      this.moveTo(x, y);
-      var dx = (x2-x), dy = (y2-y);
-      var slope = dy/dx;
-      var distRemaining = Math.sqrt( dx*dx + dy*dy );
-      var dashIndex=0, draw=true;
-      while (distRemaining>=0.1){
-        var dashLength = dashArray[dashIndex++%dashCount];
-        if (dashLength > distRemaining) dashLength = distRemaining;
-        var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
-        if (dx<0) xStep = -xStep;
-        x += xStep;
-        y += slope*xStep;
-        this[draw ? 'lineTo' : 'moveTo'](x,y);
-        distRemaining -= dashLength;
-        draw = !draw;
+        if (group.options.barChart.handleOverlap == 'stack') {
+          heightOffset = intersections[key].accumulated;
+          intersections[key].accumulated += group.zeroPosition - combinedData[i].y;
+        }
+        else if (group.options.barChart.handleOverlap == 'sideBySide') {
+          drawData.width = drawData.width / intersections[key].amount;
+          drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1));
+          if (group.options.barChart.align == 'left')       {drawData.offset -= 0.5*drawData.width;}
+          else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
+        }
       }
-    };
-
-    // TODO: add diamond shape
-  }
-
+      DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
+      // draw points
+      if (group.options.drawPoints.enabled == true) {
+        DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
+      }
+    }
+  };
 
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
 
-  
   /**
-   * Expose `Emitter`.
+   * Fill the intersections object with counters of how many datapoints share the same x coordinates
+   * @param intersections
+   * @param combinedData
+   * @private
    */
+  Bargraph._getDataIntersections = function (intersections, combinedData) {
+    // get intersections
+    var coreDistance;
+    for (var i = 0; i < combinedData.length; i++) {
+      if (i + 1 < combinedData.length) {
+        coreDistance = Math.abs(combinedData[i + 1].x - combinedData[i].x);
+      }
+      if (i > 0) {
+        coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x));
+      }
+      if (coreDistance == 0) {
+        if (intersections[combinedData[i].x] === undefined) {
+          intersections[combinedData[i].x] = {amount: 0, resolved: 0, accumulated: 0};
+        }
+        intersections[combinedData[i].x].amount += 1;
+      }
+    }
+  };
 
-  module.exports = Emitter;
 
   /**
-   * Initialize a new `Emitter`.
+   * Get the width and offset for bargraphs based on the coredistance between datapoints
    *
-   * @api public
+   * @param coreDistance
+   * @param group
+   * @param minWidth
+   * @returns {{width: Number, offset: Number}}
+   * @private
    */
+  Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
+    var width, offset;
+    if (coreDistance < group.options.barChart.width && coreDistance > 0) {
+      width = coreDistance < minWidth ? minWidth : coreDistance;
 
-  function Emitter(obj) {
-    if (obj) return mixin(obj);
+      offset = 0; // recalculate offset with the new width;
+      if (group.options.barChart.align == 'left') {
+        offset -= 0.5 * coreDistance;
+      }
+      else if (group.options.barChart.align == 'right') {
+        offset += 0.5 * coreDistance;
+      }
+    }
+    else {
+      // default settings
+      width = group.options.barChart.width;
+      offset = 0;
+      if (group.options.barChart.align == 'left') {
+        offset -= 0.5 * group.options.barChart.width;
+      }
+      else if (group.options.barChart.align == 'right') {
+        offset += 0.5 * group.options.barChart.width;
+      }
+    }
+
+    return {width: width, offset: offset};
   };
 
-  /**
-   * Mixin the emitter properties.
-   *
-   * @param {Object} obj
-   * @return {Object}
-   * @api private
-   */
+  Bargraph.getStackedBarYRange = function(barCombinedData, groupRanges, groupIds, groupLabel, orientation) {
+    if (barCombinedData.length > 0) {
+      // sort by time and by group
+      barCombinedData.sort(function (a, b) {
+        if (a.x == b.x) {
+          return a.groupId - b.groupId;
+        } else {
+          return a.x - b.x;
+        }
+      });
+      var intersections = {};
 
-  function mixin(obj) {
-    for (var key in Emitter.prototype) {
-      obj[key] = Emitter.prototype[key];
+      Bargraph._getDataIntersections(intersections, barCombinedData);
+      groupRanges[groupLabel] = Bargraph._getStackedBarYRange(intersections, barCombinedData);
+      groupRanges[groupLabel].yAxisOrientation = orientation;
+      groupIds.push(groupLabel);
     }
-    return obj;
   }
 
-  /**
-   * Listen on the given `event` with `fn`.
-   *
-   * @param {String} event
-   * @param {Function} fn
-   * @return {Emitter}
-   * @api public
-   */
+  Bargraph._getStackedBarYRange = function (intersections, combinedData) {
+    var key;
+    var yMin = combinedData[0].y;
+    var yMax = combinedData[0].y;
+    for (var i = 0; i < combinedData.length; i++) {
+      key = combinedData[i].x;
+      if (intersections[key] === undefined) {
+        yMin = yMin > combinedData[i].y ? combinedData[i].y : yMin;
+        yMax = yMax < combinedData[i].y ? combinedData[i].y : yMax;
+      }
+      else {
+        intersections[key].accumulated += combinedData[i].y;
+      }
+    }
+    for (var xpos in intersections) {
+      if (intersections.hasOwnProperty(xpos)) {
+        yMin = yMin > intersections[xpos].accumulated ? intersections[xpos].accumulated : yMin;
+        yMax = yMax < intersections[xpos].accumulated ? intersections[xpos].accumulated : yMax;
+      }
+    }
 
-  Emitter.prototype.on =
-  Emitter.prototype.addEventListener = function(event, fn){
-    this._callbacks = this._callbacks || {};
-    (this._callbacks[event] = this._callbacks[event] || [])
-      .push(fn);
-    return this;
+    return {min: yMin, max: yMax};
   };
 
+  module.exports = Bargraph;
+
+/***/ },
+/* 54 */
+/***/ function(module, exports, __webpack_require__) {
+
   /**
-   * Adds an `event` listener that will be invoked a single
-   * time then automatically removed.
-   *
-   * @param {String} event
-   * @param {Function} fn
-   * @return {Emitter}
-   * @api public
+   * Created by Alex on 11/11/2014.
    */
+  var DOMutil = __webpack_require__(2);
+  var Points = __webpack_require__(55);
 
-  Emitter.prototype.once = function(event, fn){
-    var self = this;
-    this._callbacks = this._callbacks || {};
+  function Line(groupId, options) {
+    this.groupId = groupId;
+    this.options = options;
+  }
 
-    function on() {
-      self.off(event, on);
-      fn.apply(this, arguments);
+  Line.prototype.getYRange = function(groupData) {
+    var yMin = groupData[0].y;
+    var yMax = groupData[0].y;
+    for (var j = 0; j < groupData.length; j++) {
+      yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+      yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
     }
-
-    on.fn = fn;
-    this.on(event, on);
-    return this;
+    return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
   };
 
+
   /**
-   * Remove the given callback for `event` or all
-   * registered callbacks.
+   * draw a line graph
    *
-   * @param {String} event
-   * @param {Function} fn
-   * @return {Emitter}
-   * @api public
+   * @param dataset
+   * @param group
    */
+  Line.prototype.draw = function (dataset, group, framework) {
+    if (dataset != null) {
+      if (dataset.length > 0) {
+        var path, d;
+        var svgHeight = Number(framework.svg.style.height.replace('px',''));
+        path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
+        path.setAttributeNS(null, "class", group.className);
+        if(group.style !== undefined) {
+          path.setAttributeNS(null, "style", group.style);
+        }
 
-  Emitter.prototype.off =
-  Emitter.prototype.removeListener =
-  Emitter.prototype.removeAllListeners =
-  Emitter.prototype.removeEventListener = function(event, fn){
-    this._callbacks = this._callbacks || {};
-
-    // all
-    if (0 == arguments.length) {
-      this._callbacks = {};
-      return this;
-    }
-
-    // specific event
-    var callbacks = this._callbacks[event];
-    if (!callbacks) return this;
+        // construct path from dataset
+        if (group.options.catmullRom.enabled == true) {
+          d = Line._catmullRom(dataset, group);
+        }
+        else {
+          d = Line._linear(dataset);
+        }
 
-    // remove all handlers
-    if (1 == arguments.length) {
-      delete this._callbacks[event];
-      return this;
-    }
+        // append with points for fill and finalize the path
+        if (group.options.shaded.enabled == true) {
+          var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
+          var dFill;
+          if (group.options.shaded.orientation == 'top') {
+            dFill = 'M' + dataset[0].x + ',' + 0 + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + 0;
+          }
+          else {
+            dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
+          }
+          fillPath.setAttributeNS(null, "class", group.className + " fill");
+          if(group.options.shaded.style !== undefined) {
+            fillPath.setAttributeNS(null, "style", group.options.shaded.style);
+          }
+          fillPath.setAttributeNS(null, "d", dFill);
+        }
+        // copy properties to path for drawing.
+        path.setAttributeNS(null, 'd', 'M' + d);
 
-    // remove specific handler
-    var cb;
-    for (var i = 0; i < callbacks.length; i++) {
-      cb = callbacks[i];
-      if (cb === fn || cb.fn === fn) {
-        callbacks.splice(i, 1);
-        break;
+        // draw points
+        if (group.options.drawPoints.enabled == true) {
+          Points.draw(dataset, group, framework);
+        }
       }
     }
-    return this;
   };
 
+
+
   /**
-   * Emit `event` with the given args.
-   *
-   * @param {String} event
-   * @param {Mixed} ...
-   * @return {Emitter}
+   * This uses an uniform parametrization of the CatmullRom algorithm:
+   * 'On the Parameterization of Catmull-Rom Curves' by Cem Yuksel et al.
+   * @param data
+   * @returns {string}
+   * @private
    */
+  Line._catmullRomUniform = function(data) {
+    // catmull rom
+    var p0, p1, p2, p3, bp1, bp2;
+    var d = Math.round(data[0].x) + ',' + Math.round(data[0].y) + ' ';
+    var normalization = 1/6;
+    var length = data.length;
+    for (var i = 0; i < length - 1; i++) {
 
-  Emitter.prototype.emit = function(event){
-    this._callbacks = this._callbacks || {};
-    var args = [].slice.call(arguments, 1)
-      , callbacks = this._callbacks[event];
+      p0 = (i == 0) ? data[0] : data[i-1];
+      p1 = data[i];
+      p2 = data[i+1];
+      p3 = (i + 2 < length) ? data[i+2] : p2;
 
-    if (callbacks) {
-      callbacks = callbacks.slice(0);
-      for (var i = 0, len = callbacks.length; i < len; ++i) {
-        callbacks[i].apply(this, args);
-      }
+
+      // Catmull-Rom to Cubic Bezier conversion matrix
+      //    0       1       0       0
+      //  -1/6      1      1/6      0
+      //    0      1/6      1     -1/6
+      //    0       0       1       0
+
+      //    bp0 = { x: p1.x,                               y: p1.y };
+      bp1 = { x: ((-p0.x + 6*p1.x + p2.x) *normalization), y: ((-p0.y + 6*p1.y + p2.y) *normalization)};
+      bp2 = { x: (( p1.x + 6*p2.x - p3.x) *normalization), y: (( p1.y + 6*p2.y - p3.y) *normalization)};
+      //    bp0 = { x: p2.x,                               y: p2.y };
+
+      d += 'C' +
+      bp1.x + ',' +
+      bp1.y + ' ' +
+      bp2.x + ',' +
+      bp2.y + ' ' +
+      p2.x + ',' +
+      p2.y + ' ';
     }
 
-    return this;
+    return d;
   };
 
   /**
-   * Return array of callbacks for `event`.
+   * This uses either the chordal or centripetal parameterization of the catmull-rom algorithm.
+   * By default, the centripetal parameterization is used because this gives the nicest results.
+   * These parameterizations are relatively heavy because the distance between 4 points have to be calculated.
    *
-   * @param {String} event
-   * @return {Array}
-   * @api public
-   */
+   * One optimization can be used to reuse distances since this is a sliding window approach.
+   * @param data
+   * @param group
+   * @returns {string}
+   * @private
+   */
+  Line._catmullRom = function(data, group) {
+    var alpha = group.options.catmullRom.alpha;
+    if (alpha == 0 || alpha === undefined) {
+      return this._catmullRomUniform(data);
+    }
+    else {
+      var p0, p1, p2, p3, bp1, bp2, d1,d2,d3, A, B, N, M;
+      var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
+      var d = Math.round(data[0].x) + ',' + Math.round(data[0].y) + ' ';
+      var length = data.length;
+      for (var i = 0; i < length - 1; i++) {
+
+        p0 = (i == 0) ? data[0] : data[i-1];
+        p1 = data[i];
+        p2 = data[i+1];
+        p3 = (i + 2 < length) ? data[i+2] : p2;
+
+        d1 = Math.sqrt(Math.pow(p0.x - p1.x,2) + Math.pow(p0.y - p1.y,2));
+        d2 = Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2));
+        d3 = Math.sqrt(Math.pow(p2.x - p3.x,2) + Math.pow(p2.y - p3.y,2));
+
+        // Catmull-Rom to Cubic Bezier conversion matrix
+
+        // A = 2d1^2a + 3d1^a * d2^a + d3^2a
+        // B = 2d3^2a + 3d3^a * d2^a + d2^2a
+
+        // [   0             1            0          0          ]
+        // [   -d2^2a /N     A/N          d1^2a /N   0          ]
+        // [   0             d3^2a /M     B/M        -d2^2a /M  ]
+        // [   0             0            1          0          ]
+
+        d3powA  = Math.pow(d3,  alpha);
+        d3pow2A = Math.pow(d3,2*alpha);
+        d2powA  = Math.pow(d2,  alpha);
+        d2pow2A = Math.pow(d2,2*alpha);
+        d1powA  = Math.pow(d1,  alpha);
+        d1pow2A = Math.pow(d1,2*alpha);
+
+        A = 2*d1pow2A + 3*d1powA * d2powA + d2pow2A;
+        B = 2*d3pow2A + 3*d3powA * d2powA + d2pow2A;
+        N = 3*d1powA * (d1powA + d2powA);
+        if (N > 0) {N = 1 / N;}
+        M = 3*d3powA * (d3powA + d2powA);
+        if (M > 0) {M = 1 / M;}
+
+        bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
+          y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
+
+        bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
+          y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
+
+        if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;}
+        if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;}
+        d += 'C' +
+        bp1.x + ',' +
+        bp1.y + ' ' +
+        bp2.x + ',' +
+        bp2.y + ' ' +
+        p2.x + ',' +
+        p2.y + ' ';
+      }
+
+      return d;
+    }
+  };
+
+  /**
+   * this generates the SVG path for a linear drawing between datapoints.
+   * @param data
+   * @returns {string}
+   * @private
+   */
+  Line._linear = function(data) {
+    // linear
+    var d = '';
+    for (var i = 0; i < data.length; i++) {
+      if (i == 0) {
+        d += data[i].x + ',' + data[i].y;
+      }
+      else {
+        d += ' ' + data[i].x + ',' + data[i].y;
+      }
+    }
+    return d;
+  };
+
+  module.exports = Line;
+
+
+/***/ },
+/* 55 */
+/***/ function(module, exports, __webpack_require__) {
+
+  /**
+   * Created by Alex on 11/11/2014.
+   */
+  var DOMutil = __webpack_require__(2);
+
+  function Points(groupId, options) {
+    this.groupId = groupId;
+    this.options = options;
+  }
+
+
+  Points.prototype.getYRange = function(groupData) {
+    var yMin = groupData[0].y;
+    var yMax = groupData[0].y;
+    for (var j = 0; j < groupData.length; j++) {
+      yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+      yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
+    }
+    return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
+  };
+
+  Points.prototype.draw = function(dataset, group, framework, offset) {
+    Points.draw(dataset, group, framework, offset);
+  }
+
+  /**
+   * draw the data points
+   *
+   * @param {Array} dataset
+   * @param {Object} JSONcontainer
+   * @param {Object} svg            | SVG DOM element
+   * @param {GraphGroup} group
+   * @param {Number} [offset]
+   */
+  Points.draw = function (dataset, group, framework, offset) {
+    if (offset === undefined) {offset = 0;}
+    for (var i = 0; i < dataset.length; i++) {
+      DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, framework.svgElements, framework.svg);
+    }
+  };
+
+
+  module.exports = Points;
+
+/***/ },
+/* 56 */
+/***/ function(module, exports, __webpack_require__) {
+
+  
+  /**
+   * Expose `Emitter`.
+   */
+
+  module.exports = Emitter;
+
+  /**
+   * Initialize a new `Emitter`.
+   *
+   * @api public
+   */
+
+  function Emitter(obj) {
+    if (obj) return mixin(obj);
+  };
+
+  /**
+   * Mixin the emitter properties.
+   *
+   * @param {Object} obj
+   * @return {Object}
+   * @api private
+   */
+
+  function mixin(obj) {
+    for (var key in Emitter.prototype) {
+      obj[key] = Emitter.prototype[key];
+    }
+    return obj;
+  }
+
+  /**
+   * Listen on the given `event` with `fn`.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
+   */
+
+  Emitter.prototype.on =
+  Emitter.prototype.addEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
+    (this._callbacks[event] = this._callbacks[event] || [])
+      .push(fn);
+    return this;
+  };
+
+  /**
+   * Adds an `event` listener that will be invoked a single
+   * time then automatically removed.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
+   */
+
+  Emitter.prototype.once = function(event, fn){
+    var self = this;
+    this._callbacks = this._callbacks || {};
+
+    function on() {
+      self.off(event, on);
+      fn.apply(this, arguments);
+    }
+
+    on.fn = fn;
+    this.on(event, on);
+    return this;
+  };
+
+  /**
+   * Remove the given callback for `event` or all
+   * registered callbacks.
+   *
+   * @param {String} event
+   * @param {Function} fn
+   * @return {Emitter}
+   * @api public
+   */
+
+  Emitter.prototype.off =
+  Emitter.prototype.removeListener =
+  Emitter.prototype.removeAllListeners =
+  Emitter.prototype.removeEventListener = function(event, fn){
+    this._callbacks = this._callbacks || {};
+
+    // all
+    if (0 == arguments.length) {
+      this._callbacks = {};
+      return this;
+    }
+
+    // specific event
+    var callbacks = this._callbacks[event];
+    if (!callbacks) return this;
+
+    // remove all handlers
+    if (1 == arguments.length) {
+      delete this._callbacks[event];
+      return this;
+    }
+
+    // remove specific handler
+    var cb;
+    for (var i = 0; i < callbacks.length; i++) {
+      cb = callbacks[i];
+      if (cb === fn || cb.fn === fn) {
+        callbacks.splice(i, 1);
+        break;
+      }
+    }
+    return this;
+  };
+
+  /**
+   * Emit `event` with the given args.
+   *
+   * @param {String} event
+   * @param {Mixed} ...
+   * @return {Emitter}
+   */
+
+  Emitter.prototype.emit = function(event){
+    this._callbacks = this._callbacks || {};
+    var args = [].slice.call(arguments, 1)
+      , callbacks = this._callbacks[event];
+
+    if (callbacks) {
+      callbacks = callbacks.slice(0);
+      for (var i = 0, len = callbacks.length; i < len; ++i) {
+        callbacks[i].apply(this, args);
+      }
+    }
+
+    return this;
+  };
+
+  /**
+   * Return array of callbacks for `event`.
+   *
+   * @param {String} event
+   * @return {Array}
+   * @api public
+   */
 
   Emitter.prototype.listeners = function(event){
     this._callbacks = this._callbacks || {};
@@ -24259,7 +24413,6 @@ return /******/ (function(modules) { // webpackBootstrap
       var preventDefault = options && options.preventDefault || false;
 
       var container = options && options.container || window;
-
       var _exportFunctions = {};
       var _bound = {keydown:{}, keyup:{}};
       var _keys = {};
@@ -24432,5112 +24585,5902 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 58 */
 /***/ function(module, exports, __webpack_require__) {
 
-  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
-  //! version : 2.9.0
-  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
-  //! license : MIT
-  //! momentjs.com
-
-  (function (undefined) {
-      /************************************
-          Constants
-      ************************************/
+  /**
+   * Creation of the ClusterMixin var.
+   *
+   * This contains all the functions the Network object can use to employ clustering
+   */
 
-      var moment,
-          VERSION = '2.9.0',
-          // the global-scope this is NOT the global object in Node.js
-          globalScope = (typeof global !== 'undefined' && (typeof window === 'undefined' || window === global.window)) ? global : this,
-          oldGlobalMoment,
-          round = Math.round,
-          hasOwnProperty = Object.prototype.hasOwnProperty,
-          i,
+  /**
+  * This is only called in the constructor of the network object
+  *
+  */
+  exports.startWithClustering = function() {
+   // cluster if the data set is big
+   this.clusterToFit(this.constants.clustering.initialMaxNodes, true);
 
-          YEAR = 0,
-          MONTH = 1,
-          DATE = 2,
-          HOUR = 3,
-          MINUTE = 4,
-          SECOND = 5,
-          MILLISECOND = 6,
+   // updates the lables after clustering
+   this.updateLabels();
 
-          // internal storage for locale config files
-          locales = {},
+   // this is called here because if clusterin is disabled, the start and stabilize are called in
+   // the setData function.
+   if (this.constants.stabilize == true) {
+     this._stabilize();
+   }
+   this.start();
+  };
 
-          // extra moment internal properties (plugins register props here)
-          momentProperties = [],
+  /**
+   * This function clusters until the initialMaxNodes has been reached
+   *
+   * @param {Number}  maxNumberOfNodes
+   * @param {Boolean} reposition
+   */
+  exports.clusterToFit = function(maxNumberOfNodes, reposition) {
+    var numberOfNodes = this.nodeIndices.length;
 
-          // check for nodeJS
-          hasModule = (typeof module !== 'undefined' && module && module.exports),
+    var maxLevels = 50;
+    var level = 0;
 
-          // ASP.NET json date format regex
-          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
-          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
+    // we first cluster the hubs, then we pull in the outliers, repeat
+    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+      if (level % 3 == 0.0) {
+        this.forceAggregateHubs(true);
+        this.normalizeClusterLevels();
+      }
+      else {
+        this.increaseClusterLevel(); // this also includes a cluster normalization
+      }
+      this.forceAggregateHubs(true);
+      numberOfNodes = this.nodeIndices.length;
+      level += 1;
+    }
 
-          // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html
-          // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere
-          isoDurationRegex = /^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/,
+    // after the clustering we reposition the nodes to reduce the initial chaos
+    if (level > 0 && reposition == true) {
+      this.repositionNodes();
+    }
+    this._updateCalculationNodes();
+  };
 
-          // format tokens
-          formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Q|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|x|X|zz?|ZZ?|.)/g,
-          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g,
+  /**
+   * This function can be called to open up a specific cluster.
+   * It will unpack the cluster back one level.
+   *
+   * @param node    | Node object: cluster to open.
+   */
+  exports.openCluster = function(node) {
+    var isMovingBeforeClustering = this.moving;
+    if (node.clusterSize > this.constants.clustering.sectorThreshold && this._nodeInActiveArea(node) &&
+      !(this._sector() == "default" && this.nodeIndices.length == 1)) {
+      // this loads a new sector, loads the nodes and edges and nodeIndices of it.
+      this._addSector(node);
+      var level = 0;
 
-          // parsing token regexes
-          parseTokenOneOrTwoDigits = /\d\d?/, // 0 - 99
-          parseTokenOneToThreeDigits = /\d{1,3}/, // 0 - 999
-          parseTokenOneToFourDigits = /\d{1,4}/, // 0 - 9999
-          parseTokenOneToSixDigits = /[+\-]?\d{1,6}/, // -999,999 - 999,999
-          parseTokenDigits = /\d+/, // nonzero number of digits
-          parseTokenWord = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i, // any word (or two) characters or numbers including two/three word month in arabic.
-          parseTokenTimezone = /Z|[\+\-]\d\d:?\d\d/gi, // +00:00 -00:00 +0000 -0000 or Z
-          parseTokenT = /T/i, // T (ISO separator)
-          parseTokenOffsetMs = /[\+\-]?\d+/, // 1234567890123
-          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
+      // we decluster until we reach a decent number of nodes
+      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+        this.decreaseClusterLevel();
+        level += 1;
+      }
 
-          //strict parsing regexes
-          parseTokenOneDigit = /\d/, // 0 - 9
-          parseTokenTwoDigits = /\d\d/, // 00 - 99
-          parseTokenThreeDigits = /\d{3}/, // 000 - 999
-          parseTokenFourDigits = /\d{4}/, // 0000 - 9999
-          parseTokenSixDigits = /[+-]?\d{6}/, // -999,999 - 999,999
-          parseTokenSignedNumber = /[+-]?\d+/, // -inf - inf
+    }
+    else {
+      this._expandClusterNode(node,false,true);
 
-          // iso 8601 regex
-          // 0000-00-00 0000-W00 or 0000-W00-0 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 or +00)
-          isoRegex = /^\s*(?:[+-]\d{6}|\d{4})-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/,
+      // update the index list and labels
+      this._updateNodeIndexList();
+      this._updateCalculationNodes();
+      this.updateLabels();
+    }
 
-          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
+    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+    if (this.moving != isMovingBeforeClustering) {
+      this.start();
+    }
+  };
 
-          isoDates = [
-              ['YYYYYY-MM-DD', /[+-]\d{6}-\d{2}-\d{2}/],
-              ['YYYY-MM-DD', /\d{4}-\d{2}-\d{2}/],
-              ['GGGG-[W]WW-E', /\d{4}-W\d{2}-\d/],
-              ['GGGG-[W]WW', /\d{4}-W\d{2}/],
-              ['YYYY-DDD', /\d{4}-\d{3}/]
-          ],
 
-          // iso time formats and regexes
-          isoTimes = [
-              ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d+/],
-              ['HH:mm:ss', /(T| )\d\d:\d\d:\d\d/],
-              ['HH:mm', /(T| )\d\d:\d\d/],
-              ['HH', /(T| )\d\d/]
-          ],
+  /**
+   * This calls the updateClustes with default arguments
+   */
+  exports.updateClustersDefault = function() {
+    if (this.constants.clustering.enabled == true && this.constants.clustering.clusterByZoom == true) {
+      this.updateClusters(0,false,false);
+    }
+  };
 
-          // timezone chunker '+10:00' > ['10', '00'] or '-1530' > ['-', '15', '30']
-          parseTimezoneChunker = /([\+\-]|\d\d)/gi,
 
-          // getter and setter names
-          proxyGettersAndSetters = 'Date|Hours|Minutes|Seconds|Milliseconds'.split('|'),
-          unitMillisecondFactors = {
-              'Milliseconds' : 1,
-              'Seconds' : 1e3,
-              'Minutes' : 6e4,
-              'Hours' : 36e5,
-              'Days' : 864e5,
-              'Months' : 2592e6,
-              'Years' : 31536e6
-          },
+  /**
+   * This function can be called to increase the cluster level. This means that the nodes with only one edge connection will
+   * be clustered with their connected node. This can be repeated as many times as needed.
+   * This can be called externally (by a keybind for instance) to reduce the complexity of big datasets.
+   */
+  exports.increaseClusterLevel = function() {
+    this.updateClusters(-1,false,true);
+  };
 
-          unitAliases = {
-              ms : 'millisecond',
-              s : 'second',
-              m : 'minute',
-              h : 'hour',
-              d : 'day',
-              D : 'date',
-              w : 'week',
-              W : 'isoWeek',
-              M : 'month',
-              Q : 'quarter',
-              y : 'year',
-              DDD : 'dayOfYear',
-              e : 'weekday',
-              E : 'isoWeekday',
-              gg: 'weekYear',
-              GG: 'isoWeekYear'
-          },
 
-          camelFunctions = {
-              dayofyear : 'dayOfYear',
-              isoweekday : 'isoWeekday',
-              isoweek : 'isoWeek',
-              weekyear : 'weekYear',
-              isoweekyear : 'isoWeekYear'
-          },
+  /**
+   * This function can be called to decrease the cluster level. This means that the nodes with only one edge connection will
+   * be unpacked if they are a cluster. This can be repeated as many times as needed.
+   * This can be called externally (by a key-bind for instance) to look into clusters without zooming.
+   */
+  exports.decreaseClusterLevel = function() {
+    this.updateClusters(1,false,true);
+  };
 
-          // format function strings
-          formatFunctions = {},
 
-          // default relative time thresholds
-          relativeTimeThresholds = {
-              s: 45,  // seconds to minute
-              m: 45,  // minutes to hour
-              h: 22,  // hours to day
-              d: 26,  // days to month
-              M: 11   // months to year
-          },
-
-          // tokens to ordinalize and pad
-          ordinalizeTokens = 'DDD w W M D d'.split(' '),
-          paddedTokens = 'M D H h m s w W'.split(' '),
+  /**
+   * This is the main clustering function. It clusters and declusters on zoom or forced
+   * This function clusters on zoom, it can be called with a predefined zoom direction
+   * If out, check if we can form clusters, if in, check if we can open clusters.
+   * This function is only called from _zoom()
+   *
+   * @param {Number} zoomDirection  | -1 / 0 / +1   for  zoomOut / determineByZoom / zoomIn
+   * @param {Boolean} recursive     | enabled or disable recursive calling of the opening of clusters
+   * @param {Boolean} force         | enabled or disable forcing
+   * @param {Boolean} doNotStart    | if true do not call start
+   *
+   */
+  exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
 
-          formatTokenFunctions = {
-              M    : function () {
-                  return this.month() + 1;
-              },
-              MMM  : function (format) {
-                  return this.localeData().monthsShort(this, format);
-              },
-              MMMM : function (format) {
-                  return this.localeData().months(this, format);
-              },
-              D    : function () {
-                  return this.date();
-              },
-              DDD  : function () {
-                  return this.dayOfYear();
-              },
-              d    : function () {
-                  return this.day();
-              },
-              dd   : function (format) {
-                  return this.localeData().weekdaysMin(this, format);
-              },
-              ddd  : function (format) {
-                  return this.localeData().weekdaysShort(this, format);
-              },
-              dddd : function (format) {
-                  return this.localeData().weekdays(this, format);
-              },
-              w    : function () {
-                  return this.week();
-              },
-              W    : function () {
-                  return this.isoWeek();
-              },
-              YY   : function () {
-                  return leftZeroFill(this.year() % 100, 2);
-              },
-              YYYY : function () {
-                  return leftZeroFill(this.year(), 4);
-              },
-              YYYYY : function () {
-                  return leftZeroFill(this.year(), 5);
-              },
-              YYYYYY : function () {
-                  var y = this.year(), sign = y >= 0 ? '+' : '-';
-                  return sign + leftZeroFill(Math.abs(y), 6);
-              },
-              gg   : function () {
-                  return leftZeroFill(this.weekYear() % 100, 2);
-              },
-              gggg : function () {
-                  return leftZeroFill(this.weekYear(), 4);
-              },
-              ggggg : function () {
-                  return leftZeroFill(this.weekYear(), 5);
-              },
-              GG   : function () {
-                  return leftZeroFill(this.isoWeekYear() % 100, 2);
-              },
-              GGGG : function () {
-                  return leftZeroFill(this.isoWeekYear(), 4);
-              },
-              GGGGG : function () {
-                  return leftZeroFill(this.isoWeekYear(), 5);
-              },
-              e : function () {
-                  return this.weekday();
-              },
-              E : function () {
-                  return this.isoWeekday();
-              },
-              a    : function () {
-                  return this.localeData().meridiem(this.hours(), this.minutes(), true);
-              },
-              A    : function () {
-                  return this.localeData().meridiem(this.hours(), this.minutes(), false);
-              },
-              H    : function () {
-                  return this.hours();
-              },
-              h    : function () {
-                  return this.hours() % 12 || 12;
-              },
-              m    : function () {
-                  return this.minutes();
-              },
-              s    : function () {
-                  return this.seconds();
-              },
-              S    : function () {
-                  return toInt(this.milliseconds() / 100);
-              },
-              SS   : function () {
-                  return leftZeroFill(toInt(this.milliseconds() / 10), 2);
-              },
-              SSS  : function () {
-                  return leftZeroFill(this.milliseconds(), 3);
-              },
-              SSSS : function () {
-                  return leftZeroFill(this.milliseconds(), 3);
-              },
-              Z    : function () {
-                  var a = this.utcOffset(),
-                      b = '+';
-                  if (a < 0) {
-                      a = -a;
-                      b = '-';
-                  }
-                  return b + leftZeroFill(toInt(a / 60), 2) + ':' + leftZeroFill(toInt(a) % 60, 2);
-              },
-              ZZ   : function () {
-                  var a = this.utcOffset(),
-                      b = '+';
-                  if (a < 0) {
-                      a = -a;
-                      b = '-';
-                  }
-                  return b + leftZeroFill(toInt(a / 60), 2) + leftZeroFill(toInt(a) % 60, 2);
-              },
-              z : function () {
-                  return this.zoneAbbr();
-              },
-              zz : function () {
-                  return this.zoneName();
-              },
-              x    : function () {
-                  return this.valueOf();
-              },
-              X    : function () {
-                  return this.unix();
-              },
-              Q : function () {
-                  return this.quarter();
-              }
-          },
+    var detectedZoomingIn = (this.previousScale < this.scale && zoomDirection == 0);
+    var detectedZoomingOut = (this.previousScale > this.scale && zoomDirection == 0);
 
-          deprecations = {},
+    // on zoom out collapse the sector if the scale is at the level the sector was made
+    if (detectedZoomingOut == true) {
+      this._collapseSector();
+    }
 
-          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'],
+    // check if we zoom in or out
+    if (detectedZoomingOut == true || zoomDirection == -1) { // zoom out
+      // forming clusters when forced pulls outliers in. When not forced, the edge length of the
+      // outer nodes determines if it is being clustered
+      this._formClusters(force);
+    }
+    else if (detectedZoomingIn == true || zoomDirection == 1) { // zoom in
+      if (force == true) {
+        // _openClusters checks for each node if the formationScale of the cluster is smaller than
+        // the current scale and if so, declusters. When forced, all clusters are reduced by one step
+        this._openClusters(recursive,force);
+      }
+      else {
+        // if a cluster takes up a set percentage of the active window
+        //this._openClustersBySize();
+        this._openClusters(recursive, false);
+      }
+    }
+    this._updateNodeIndexList();
 
-          updateInProgress = false;
+    // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
+    if (this.nodeIndices.length == amountOfNodes && (detectedZoomingOut == true || zoomDirection == -1))  {
+      this._aggregateHubs(force);
+      this._updateNodeIndexList();
+    }
 
-      // Pick the first defined of two or three arguments. dfl comes from
-      // default.
-      function dfl(a, b, c) {
-          switch (arguments.length) {
-              case 2: return a != null ? a : b;
-              case 3: return a != null ? a : b != null ? b : c;
-              default: throw new Error('Implement me');
-          }
-      }
+    // we now reduce chains.
+    if (detectedZoomingOut == true || zoomDirection == -1) { // zoom out
+      this.handleChains();
+      this._updateNodeIndexList();
+    }
 
-      function hasOwnProp(a, b) {
-          return hasOwnProperty.call(a, b);
-      }
+    this.previousScale = this.scale;
 
-      function defaultParsingFlags() {
-          // We need to deep clone this object, and es5 standard is not very
-          // helpful.
-          return {
-              empty : false,
-              unusedTokens : [],
-              unusedInput : [],
-              overflow : -2,
-              charsLeftOver : 0,
-              nullInput : false,
-              invalidMonth : null,
-              invalidFormat : false,
-              userInvalidated : false,
-              iso: false
-          };
-      }
+    // update labels
+    this.updateLabels();
 
-      function printMsg(msg) {
-          if (moment.suppressDeprecationWarnings === false &&
-                  typeof console !== 'undefined' && console.warn) {
-              console.warn('Deprecation warning: ' + msg);
-          }
-      }
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length < amountOfNodes) { // this means a clustering operation has taken place
+      this.clusterSession += 1;
+      // if clusters have been made, we normalize the cluster level
+      this.normalizeClusterLevels();
+    }
 
-      function deprecate(msg, fn) {
-          var firstTime = true;
-          return extend(function () {
-              if (firstTime) {
-                  printMsg(msg);
-                  firstTime = false;
-              }
-              return fn.apply(this, arguments);
-          }, fn);
+    if (doNotStart == false || doNotStart === undefined) {
+      // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+      if (this.moving != isMovingBeforeClustering) {
+        this.start();
       }
+    }
 
-      function deprecateSimple(name, msg) {
-          if (!deprecations[name]) {
-              printMsg(msg);
-              deprecations[name] = true;
-          }
-      }
+    this._updateCalculationNodes();
+  };
 
-      function padToken(func, count) {
-          return function (a) {
-              return leftZeroFill(func.call(this, a), count);
-          };
-      }
-      function ordinalizeToken(func, period) {
-          return function (a) {
-              return this.localeData().ordinal(func.call(this, a), period);
-          };
-      }
+  /**
+   * This function handles the chains. It is called on every updateClusters().
+   */
+  exports.handleChains = function() {
+    // after clustering we check how many chains there are
+    var chainPercentage = this._getChainFraction();
+    if (chainPercentage > this.constants.clustering.chainThreshold) {
+      this._reduceAmountOfChains(1 - this.constants.clustering.chainThreshold / chainPercentage)
 
-      function monthDiff(a, b) {
-          // difference in months
-          var wholeMonthDiff = ((b.year() - a.year()) * 12) + (b.month() - a.month()),
-              // b is in (anchor - 1 month, anchor + 1 month)
-              anchor = a.clone().add(wholeMonthDiff, 'months'),
-              anchor2, adjust;
+    }
+  };
 
-          if (b - anchor < 0) {
-              anchor2 = a.clone().add(wholeMonthDiff - 1, 'months');
-              // linear across the month
-              adjust = (b - anchor) / (anchor - anchor2);
-          } else {
-              anchor2 = a.clone().add(wholeMonthDiff + 1, 'months');
-              // linear across the month
-              adjust = (b - anchor) / (anchor2 - anchor);
-          }
+  /**
+   * this functions starts clustering by hubs
+   * The minimum hub threshold is set globally
+   *
+   * @private
+   */
+  exports._aggregateHubs = function(force) {
+    this._getHubSize();
+    this._formClustersByHub(force,false);
+  };
 
-          return -(wholeMonthDiff + adjust);
-      }
 
-      while (ordinalizeTokens.length) {
-          i = ordinalizeTokens.pop();
-          formatTokenFunctions[i + 'o'] = ordinalizeToken(formatTokenFunctions[i], i);
-      }
-      while (paddedTokens.length) {
-          i = paddedTokens.pop();
-          formatTokenFunctions[i + i] = padToken(formatTokenFunctions[i], 2);
-      }
-      formatTokenFunctions.DDDD = padToken(formatTokenFunctions.DDD, 3);
+  /**
+   * This function forces hubs to form.
+   *
+   */
+  exports.forceAggregateHubs = function(doNotStart) {
+    var isMovingBeforeClustering = this.moving;
+    var amountOfNodes = this.nodeIndices.length;
 
+    this._aggregateHubs(true);
 
-      function meridiemFixWrap(locale, hour, meridiem) {
-          var isPm;
+    // update the index list, dynamic edges and labels
+    this._updateNodeIndexList();
+    this.updateLabels();
 
-          if (meridiem == null) {
-              // nothing to do
-              return hour;
-          }
-          if (locale.meridiemHour != null) {
-              return locale.meridiemHour(hour, meridiem);
-          } else if (locale.isPM != null) {
-              // Fallback
-              isPm = locale.isPM(meridiem);
-              if (isPm && hour < 12) {
-                  hour += 12;
-              }
-              if (!isPm && hour === 12) {
-                  hour = 0;
-              }
-              return hour;
-          } else {
-              // thie is not supposed to happen
-              return hour;
-          }
-      }
+    this._updateCalculationNodes();
 
-      /************************************
-          Constructors
-      ************************************/
+    // if a cluster was formed, we increase the clusterSession
+    if (this.nodeIndices.length != amountOfNodes) {
+      this.clusterSession += 1;
+    }
 
-      function Locale() {
+    if (doNotStart == false || doNotStart === undefined) {
+      // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+      if (this.moving != isMovingBeforeClustering) {
+        this.start();
       }
+    }
+  };
 
-      // Moment prototype object
-      function Moment(config, skipOverflow) {
-          if (skipOverflow !== false) {
-              checkOverflow(config);
-          }
-          copyConfig(this, config);
-          this._d = new Date(+config._d);
-          // Prevent infinite loop in case updateOffset creates new moment
-          // objects.
-          if (updateInProgress === false) {
-              updateInProgress = true;
-              moment.updateOffset(this);
-              updateInProgress = false;
+  /**
+   * If a cluster takes up more than a set percentage of the screen, open the cluster
+   *
+   * @private
+   */
+  exports._openClustersBySize = function() {
+    if (this.constants.clustering.clusterByZoom == true) {
+      for (var nodeId in this.nodes) {
+        if (this.nodes.hasOwnProperty(nodeId)) {
+          var node = this.nodes[nodeId];
+          if (node.inView() == true) {
+            if ((node.width * this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
+              (node.height * this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
+              this.openCluster(node);
+            }
           }
+        }
       }
+    }
+  };
 
-      // Duration Constructor
-      function Duration(duration) {
-          var normalizedInput = normalizeObjectUnits(duration),
-              years = normalizedInput.year || 0,
-              quarters = normalizedInput.quarter || 0,
-              months = normalizedInput.month || 0,
-              weeks = normalizedInput.week || 0,
-              days = normalizedInput.day || 0,
-              hours = normalizedInput.hour || 0,
-              minutes = normalizedInput.minute || 0,
-              seconds = normalizedInput.second || 0,
-              milliseconds = normalizedInput.millisecond || 0;
-
-          // representation for dateAddRemove
-          this._milliseconds = +milliseconds +
-              seconds * 1e3 + // 1000
-              minutes * 6e4 + // 1000 * 60
-              hours * 36e5; // 1000 * 60 * 60
-          // Because of dateAddRemove treats 24 hours as different from a
-          // day when working around DST, we need to store them separately
-          this._days = +days +
-              weeks * 7;
-          // It is impossible translate months into days without knowing
-          // which months you are are talking about, so we have to store
-          // it separately.
-          this._months = +months +
-              quarters * 3 +
-              years * 12;
-
-          this._data = {};
 
-          this._locale = moment.localeData();
+  /**
+   * This function loops over all nodes in the nodeIndices list. For each node it checks if it is a cluster and if it
+   * has to be opened based on the current zoom level.
+   *
+   * @private
+   */
+  exports._openClusters = function(recursive,force) {
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      var node = this.nodes[this.nodeIndices[i]];
+      this._expandClusterNode(node,recursive,force);
+      this._updateCalculationNodes();
+    }
+  };
 
-          this._bubble();
+  /**
+   * This function checks if a node has to be opened. This is done by checking the zoom level.
+   * If the node contains child nodes, this function is recursively called on the child nodes as well.
+   * This recursive behaviour is optional and can be set by the recursive argument.
+   *
+   * @param {Node}    parentNode    | to check for cluster and expand
+   * @param {Boolean} recursive     | enabled or disable recursive calling
+   * @param {Boolean} force         | enabled or disable forcing
+   * @param {Boolean} [openAll]     | This will recursively force all nodes in the parent to be released
+   * @private
+   */
+  exports._expandClusterNode = function(parentNode, recursive, force, openAll) {
+    // first check if node is a cluster
+    if (parentNode.clusterSize > 1) {
+      if (openAll === undefined) {
+        openAll = false;
       }
+      // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
 
-      /************************************
-          Helpers
-      ************************************/
-
+      recursive = openAll || recursive;
+      // if the last child has been added on a smaller scale than current scale decluster
+      if (parentNode.formationScale < this.scale || force == true) {
+        // we will check if any of the contained child nodes should be removed from the cluster
+        for (var containedNodeId in parentNode.containedNodes) {
+          if (parentNode.containedNodes.hasOwnProperty(containedNodeId)) {
+            var childNode = parentNode.containedNodes[containedNodeId];
 
-      function extend(a, b) {
-          for (var i in b) {
-              if (hasOwnProp(b, i)) {
-                  a[i] = b[i];
+            // force expand will expand the largest cluster size clusters. Since we cluster from outside in, we assume that
+            // the largest cluster is the one that comes from outside
+            if (force == true) {
+              if (childNode.clusterSession == parentNode.clusterSessions[parentNode.clusterSessions.length-1]
+                  || openAll) {
+                this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
+              }
+            }
+            else {
+              if (this._nodeInActiveArea(parentNode)) {
+                this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
               }
+            }
           }
+        }
+      }
+    }
+  };
 
-          if (hasOwnProp(b, 'toString')) {
-              a.toString = b.toString;
-          }
+  /**
+   * ONLY CALLED FROM _expandClusterNode
+   *
+   * This function will expel a child_node from a parent_node. This is to de-cluster the node. This function will remove
+   * the child node from the parent contained_node object and put it back into the global nodes object.
+   * The same holds for the edge that was connected to the child node. It is moved back into the global edges object.
+   *
+   * @param {Node}    parentNode        | the parent node
+   * @param {String}  containedNodeId   | child_node id as it is contained in the containedNodes object of the parent node
+   * @param {Boolean} recursive         | This will also check if the child needs to be expanded.
+   *                                      With force and recursive both true, the entire cluster is unpacked
+   * @param {Boolean} force             | This will disregard the zoom level and will expel this child from the parent
+   * @param {Boolean} openAll           | This will recursively force all nodes in the parent to be released
+   * @private
+   */
+  exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
+    var childNode = parentNode.containedNodes[containedNodeId]
 
-          if (hasOwnProp(b, 'valueOf')) {
-              a.valueOf = b.valueOf;
-          }
+    // if child node has been added on smaller scale than current, kick out
+    if (childNode.formationScale < this.scale || force == true) {
+      // unselect all selected items
+      this._unselectAll();
 
-          return a;
-      }
+      // put the child node back in the global nodes object
+      this.nodes[containedNodeId] = childNode;
 
-      function copyConfig(to, from) {
-          var i, prop, val;
+      // release the contained edges from this childNode back into the global edges
+      this._releaseContainedEdges(parentNode,childNode);
 
-          if (typeof from._isAMomentObject !== 'undefined') {
-              to._isAMomentObject = from._isAMomentObject;
-          }
-          if (typeof from._i !== 'undefined') {
-              to._i = from._i;
-          }
-          if (typeof from._f !== 'undefined') {
-              to._f = from._f;
-          }
-          if (typeof from._l !== 'undefined') {
-              to._l = from._l;
-          }
-          if (typeof from._strict !== 'undefined') {
-              to._strict = from._strict;
-          }
-          if (typeof from._tzm !== 'undefined') {
-              to._tzm = from._tzm;
-          }
-          if (typeof from._isUTC !== 'undefined') {
-              to._isUTC = from._isUTC;
-          }
-          if (typeof from._offset !== 'undefined') {
-              to._offset = from._offset;
-          }
-          if (typeof from._pf !== 'undefined') {
-              to._pf = from._pf;
-          }
-          if (typeof from._locale !== 'undefined') {
-              to._locale = from._locale;
-          }
+      // reconnect rerouted edges to the childNode
+      this._connectEdgeBackToChild(parentNode,childNode);
 
-          if (momentProperties.length > 0) {
-              for (i in momentProperties) {
-                  prop = momentProperties[i];
-                  val = from[prop];
-                  if (typeof val !== 'undefined') {
-                      to[prop] = val;
-                  }
-              }
-          }
+      // validate all edges in dynamicEdges
+      this._validateEdges(parentNode);
 
-          return to;
-      }
+      // undo the changes from the clustering operation on the parent node
+      parentNode.options.mass -= childNode.options.mass;
+      parentNode.clusterSize -= childNode.clusterSize;
+      parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*(parentNode.clusterSize-1));
 
-      function absRound(number) {
-          if (number < 0) {
-              return Math.ceil(number);
-          } else {
-              return Math.floor(number);
-          }
-      }
+      // place the child node near the parent, not at the exact same location to avoid chaos in the system
+      childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
+      childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
 
-      // left zero fill a number
-      // see http://jsperf.com/left-zero-filling for performance comparison
-      function leftZeroFill(number, targetLength, forceSign) {
-          var output = '' + Math.abs(number),
-              sign = number >= 0;
+      // remove node from the list
+      delete parentNode.containedNodes[containedNodeId];
 
-          while (output.length < targetLength) {
-              output = '0' + output;
+      // check if there are other childs with this clusterSession in the parent.
+      var othersPresent = false;
+      for (var childNodeId in parentNode.containedNodes) {
+        if (parentNode.containedNodes.hasOwnProperty(childNodeId)) {
+          if (parentNode.containedNodes[childNodeId].clusterSession == childNode.clusterSession) {
+            othersPresent = true;
+            break;
           }
-          return (sign ? (forceSign ? '+' : '') : '-') + output;
+        }
+      }
+      // if there are no others, remove the cluster session from the list
+      if (othersPresent == false) {
+        parentNode.clusterSessions.pop();
       }
 
-      function positiveMomentsDifference(base, other) {
-          var res = {milliseconds: 0, months: 0};
-
-          res.months = other.month() - base.month() +
-              (other.year() - base.year()) * 12;
-          if (base.clone().add(res.months, 'M').isAfter(other)) {
-              --res.months;
-          }
+      this._repositionBezierNodes(childNode);
+  //      this._repositionBezierNodes(parentNode);
 
-          res.milliseconds = +other - +(base.clone().add(res.months, 'M'));
+      // remove the clusterSession from the child node
+      childNode.clusterSession = 0;
 
-          return res;
-      }
+      // recalculate the size of the node on the next time the node is rendered
+      parentNode.clearSizeCache();
 
-      function momentsDifference(base, other) {
-          var res;
-          other = makeAs(other, base);
-          if (base.isBefore(other)) {
-              res = positiveMomentsDifference(base, other);
-          } else {
-              res = positiveMomentsDifference(other, base);
-              res.milliseconds = -res.milliseconds;
-              res.months = -res.months;
-          }
+      // restart the simulation to reorganise all nodes
+      this.moving = true;
+    }
 
-          return res;
-      }
+    // check if a further expansion step is possible if recursivity is enabled
+    if (recursive == true) {
+      this._expandClusterNode(childNode,recursive,force,openAll);
+    }
+  };
 
-      // TODO: remove 'name' arg after deprecation is removed
-      function createAdder(direction, name) {
-          return function (val, period) {
-              var dur, tmp;
-              //invert the arguments, but complain about it
-              if (period !== null && !isNaN(+period)) {
-                  deprecateSimple(name, 'moment().' + name  + '(period, number) is deprecated. Please use moment().' + name + '(number, period).');
-                  tmp = val; val = period; period = tmp;
-              }
 
-              val = typeof val === 'string' ? +val : val;
-              dur = moment.duration(val, period);
-              addOrSubtractDurationFromMoment(this, dur, direction);
-              return this;
-          };
-      }
+  /**
+   * position the bezier nodes at the center of the edges
+   *
+   * @param node
+   * @private
+   */
+  exports._repositionBezierNodes = function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      node.dynamicEdges[i].positionBezierNode();
+    }
+  };
 
-      function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) {
-          var milliseconds = duration._milliseconds,
-              days = duration._days,
-              months = duration._months;
-          updateOffset = updateOffset == null ? true : updateOffset;
 
-          if (milliseconds) {
-              mom._d.setTime(+mom._d + milliseconds * isAdding);
-          }
-          if (days) {
-              rawSetter(mom, 'Date', rawGetter(mom, 'Date') + days * isAdding);
-          }
-          if (months) {
-              rawMonthSetter(mom, rawGetter(mom, 'Month') + months * isAdding);
-          }
-          if (updateOffset) {
-              moment.updateOffset(mom, days || months);
-          }
+  /**
+   * This function checks if any nodes at the end of their trees have edges below a threshold length
+   * This function is called only from updateClusters()
+   * forceLevelCollapse ignores the length of the edge and collapses one level
+   * This means that a node with only one edge will be clustered with its connected node
+   *
+   * @private
+   * @param {Boolean} force
+   */
+  exports._formClusters = function(force) {
+    if (force == false) {
+      if (this.constants.clustering.clusterByZoom == true) {
+        this._formClustersByZoom();
       }
+    }
+    else {
+      this._forceClustersByZoom();
+    }
+  };
 
-      // check if is an array
-      function isArray(input) {
-          return Object.prototype.toString.call(input) === '[object Array]';
-      }
 
-      function isDate(input) {
-          return Object.prototype.toString.call(input) === '[object Date]' ||
-              input instanceof Date;
-      }
+  /**
+   * This function handles the clustering by zooming out, this is based on a minimum edge distance
+   *
+   * @private
+   */
+  exports._formClustersByZoom = function() {
+    var dx,dy,length;
+    var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
 
-      // compare two arrays, return the number of differences
-      function compareArrays(array1, array2, dontConvert) {
-          var len = Math.min(array1.length, array2.length),
-              lengthDiff = Math.abs(array1.length - array2.length),
-              diffs = 0,
-              i;
-          for (i = 0; i < len; i++) {
-              if ((dontConvert && array1[i] !== array2[i]) ||
-                  (!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
-                  diffs++;
-              }
-          }
-          return diffs + lengthDiff;
-      }
+    // check if any edges are shorter than minLength and start the clustering
+    // the clustering favours the node with the larger mass
+    for (var edgeId in this.edges) {
+      if (this.edges.hasOwnProperty(edgeId)) {
+        var edge = this.edges[edgeId];
+        if (edge.connected) {
+          if (edge.toId != edge.fromId) {
+            dx = (edge.to.x - edge.from.x);
+            dy = (edge.to.y - edge.from.y);
+            length = Math.sqrt(dx * dx + dy * dy);
 
-      function normalizeUnits(units) {
-          if (units) {
-              var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
-              units = unitAliases[units] || camelFunctions[lowered] || lowered;
-          }
-          return units;
-      }
 
-      function normalizeObjectUnits(inputObject) {
-          var normalizedInput = {},
-              normalizedProp,
-              prop;
+            if (length < minLength) {
+              // first check which node is larger
+              var parentNode = edge.from;
+              var childNode = edge.to;
+              if (edge.to.options.mass > edge.from.options.mass) {
+                parentNode = edge.to;
+                childNode = edge.from;
+              }
 
-          for (prop in inputObject) {
-              if (hasOwnProp(inputObject, prop)) {
-                  normalizedProp = normalizeUnits(prop);
-                  if (normalizedProp) {
-                      normalizedInput[normalizedProp] = inputObject[prop];
-                  }
+              if (childNode.dynamicEdges.length == 1) {
+                this._addToCluster(parentNode,childNode,false);
               }
+              else if (parentNode.dynamicEdges.length == 1) {
+                this._addToCluster(childNode,parentNode,false);
+              }
+            }
           }
-
-          return normalizedInput;
+        }
       }
+    }
+  };
 
-      function makeList(field) {
-          var count, setter;
+  /**
+   * This function forces the network to cluster all nodes with only one connecting edge to their
+   * connected node.
+   *
+   * @private
+   */
+  exports._forceClustersByZoom = function() {
+    for (var nodeId in this.nodes) {
+      // another node could have absorbed this child.
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var childNode = this.nodes[nodeId];
 
-          if (field.indexOf('week') === 0) {
-              count = 7;
-              setter = 'day';
-          }
-          else if (field.indexOf('month') === 0) {
-              count = 12;
-              setter = 'month';
-          }
-          else {
-              return;
+        // the edges can be swallowed by another decrease
+        if (childNode.dynamicEdges.length == 1) {
+          var edge = childNode.dynamicEdges[0];
+          var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
+          // group to the largest node
+          if (childNode.id != parentNode.id) {
+            if (parentNode.options.mass > childNode.options.mass) {
+              this._addToCluster(parentNode,childNode,true);
+            }
+            else {
+              this._addToCluster(childNode,parentNode,true);
+            }
           }
+        }
+      }
+    }
+  };
 
-          moment[field] = function (format, index) {
-              var i, getter,
-                  method = moment._locale[field],
-                  results = [];
 
-              if (typeof format === 'number') {
-                  index = format;
-                  format = undefined;
-              }
+  /**
+   * To keep the nodes of roughly equal size we normalize the cluster levels.
+   * This function clusters a node to its smallest connected neighbour.
+   *
+   * @param node
+   * @private
+   */
+  exports._clusterToSmallestNeighbour = function(node) {
+    var smallestNeighbour = -1;
+    var smallestNeighbourNode = null;
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      if (node.dynamicEdges[i] !== undefined) {
+        var neighbour = null;
+        if (node.dynamicEdges[i].fromId != node.id) {
+          neighbour = node.dynamicEdges[i].from;
+        }
+        else if (node.dynamicEdges[i].toId != node.id) {
+          neighbour = node.dynamicEdges[i].to;
+        }
 
-              getter = function (i) {
-                  var m = moment().utc().set(setter, i);
-                  return method.call(moment._locale, m, format || '');
-              };
 
-              if (index != null) {
-                  return getter(index);
-              }
-              else {
-                  for (i = 0; i < count; i++) {
-                      results.push(getter(i));
-                  }
-                  return results;
-              }
-          };
+        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+          smallestNeighbour = neighbour.clusterSessions.length;
+          smallestNeighbourNode = neighbour;
+        }
       }
+    }
 
-      function toInt(argumentForCoercion) {
-          var coercedNumber = +argumentForCoercion,
-              value = 0;
+    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+      this._addToCluster(neighbour, node, true);
+    }
+  };
 
-          if (coercedNumber !== 0 && isFinite(coercedNumber)) {
-              if (coercedNumber >= 0) {
-                  value = Math.floor(coercedNumber);
-              } else {
-                  value = Math.ceil(coercedNumber);
-              }
-          }
 
-          return value;
+  /**
+   * This function forms clusters from hubs, it loops over all nodes
+   *
+   * @param {Boolean} force         |   Disregard zoom level
+   * @param {Boolean} onlyEqual     |   This only clusters a hub with a specific number of edges
+   * @private
+   */
+  exports._formClustersByHub = function(force, onlyEqual) {
+    // we loop over all nodes in the list
+    for (var nodeId in this.nodes) {
+      // we check if it is still available since it can be used by the clustering in this loop
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        this._formClusterFromHub(this.nodes[nodeId],force,onlyEqual);
       }
+    }
+  };
 
-      function daysInMonth(year, month) {
-          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
-      }
+  /**
+   * This function forms a cluster from a specific preselected hub node
+   *
+   * @param {Node}    hubNode       |   the node we will cluster as a hub
+   * @param {Boolean} force         |   Disregard zoom level
+   * @param {Boolean} onlyEqual     |   This only clusters a hub with a specific number of edges
+   * @param {Number} [absorptionSizeOffset] |
+   * @private
+   */
+  exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
+    if (absorptionSizeOffset === undefined) {
+      absorptionSizeOffset = 0;
+    }
+    //this.hubThreshold = 43
+    //if (hubNode.dynamicEdgesLength < 0) {
+    // console.error(hubNode.dynamicEdgesLength, this.hubThreshold, onlyEqual)
+    //}
+    // we decide if the node is a hub
+    if ((hubNode.dynamicEdges.length >= this.hubThreshold && onlyEqual == false) ||
+      (hubNode.dynamicEdges.length == this.hubThreshold && onlyEqual == true)) {
+      // initialize variables
+      var dx,dy,length;
+      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+      var allowCluster = false;
 
-      function weeksInYear(year, dow, doy) {
-          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
+      // we create a list of edges because the dynamicEdges change over the course of this loop
+      var edgesIdarray = [];
+      var amountOfInitialEdges = hubNode.dynamicEdges.length;
+      for (var j = 0; j < amountOfInitialEdges; j++) {
+        edgesIdarray.push(hubNode.dynamicEdges[j].id);
       }
 
-      function daysInYear(year) {
-          return isLeapYear(year) ? 366 : 365;
-      }
+      // if the hub clustering is not forced, we check if one of the edges connected
+      // to a cluster is small enough based on the constants.clustering.clusterEdgeThreshold
+      if (force == false) {
+        allowCluster = false;
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          var edge = this.edges[edgesIdarray[j]];
+          if (edge !== undefined) {
+            if (edge.connected) {
+              if (edge.toId != edge.fromId) {
+                dx = (edge.to.x - edge.from.x);
+                dy = (edge.to.y - edge.from.y);
+                length = Math.sqrt(dx * dx + dy * dy);
 
-      function isLeapYear(year) {
-          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+                if (length < minLength) {
+                  allowCluster = true;
+                  break;
+                }
+              }
+            }
+          }
+        }
       }
 
-      function checkOverflow(m) {
-          var overflow;
-          if (m._a && m._pf.overflow === -2) {
-              overflow =
-                  m._a[MONTH] < 0 || m._a[MONTH] > 11 ? MONTH :
-                  m._a[DATE] < 1 || m._a[DATE] > daysInMonth(m._a[YEAR], m._a[MONTH]) ? DATE :
-                  m._a[HOUR] < 0 || m._a[HOUR] > 24 ||
-                      (m._a[HOUR] === 24 && (m._a[MINUTE] !== 0 ||
-                                             m._a[SECOND] !== 0 ||
-                                             m._a[MILLISECOND] !== 0)) ? HOUR :
-                  m._a[MINUTE] < 0 || m._a[MINUTE] > 59 ? MINUTE :
-                  m._a[SECOND] < 0 || m._a[SECOND] > 59 ? SECOND :
-                  m._a[MILLISECOND] < 0 || m._a[MILLISECOND] > 999 ? MILLISECOND :
-                  -1;
+      // start the clustering if allowed
+      if ((!force && allowCluster) || force) {
+        var children = [];
+        var childrenIds = {};
+        // we loop over all edges INITIALLY connected to this hub to get a list of the childNodes
+        for (j = 0; j < amountOfInitialEdges; j++) {
+          edge = this.edges[edgesIdarray[j]];
+          var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+          if (childrenIds[childNode.id] === undefined) {
+            childrenIds[childNode.id] = true;
+            children.push(childNode);
+          }
+        }
 
-              if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
-                  overflow = DATE;
-              }
+        for (j = 0; j < children.length; j++) {
+          var childNode = children[j];
+          // we do not want hubs to merge with other hubs nor do we want to cluster itself.
+          if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
+            (childNode.id != hubNode.id)) {
+            this._addToCluster(hubNode,childNode,force);
 
-              m._pf.overflow = overflow;
           }
+          else {
+            //console.log("WILL NOT MERGE:",childNode.dynamicEdges.length , (this.hubThreshold + absorptionSizeOffset))
+          }
+        }
+
       }
+    }
+  };
 
-      function isValid(m) {
-          if (m._isValid == null) {
-              m._isValid = !isNaN(m._d.getTime()) &&
-                  m._pf.overflow < 0 &&
-                  !m._pf.empty &&
-                  !m._pf.invalidMonth &&
-                  !m._pf.nullInput &&
-                  !m._pf.invalidFormat &&
-                  !m._pf.userInvalidated;
 
-              if (m._strict) {
-                  m._isValid = m._isValid &&
-                      m._pf.charsLeftOver === 0 &&
-                      m._pf.unusedTokens.length === 0 &&
-                      m._pf.bigHour === undefined;
-              }
-          }
-          return m._isValid;
-      }
 
-      function normalizeLocale(key) {
-          return key ? key.toLowerCase().replace('_', '-') : key;
+  /**
+   * This function adds the child node to the parent node, creating a cluster if it is not already.
+   *
+   * @param {Node} parentNode           | this is the node that will house the child node
+   * @param {Node} childNode            | this node will be deleted from the global this.nodes and stored in the parent node
+   * @param {Boolean} force             | true will only update the remainingEdges at the very end of the clustering, ensuring single level collapse
+   * @private
+   */
+  exports._addToCluster = function(parentNode, childNode, force) {
+    // join child node in the parent node
+    parentNode.containedNodes[childNode.id] = childNode;
+    //console.log(parentNode.id, childNode.id)
+    // manage all the edges connected to the child and parent nodes
+    for (var i = 0; i < childNode.dynamicEdges.length; i++) {
+      var edge = childNode.dynamicEdges[i];
+      if (edge.toId == parentNode.id || edge.fromId == parentNode.id) { // edge connected to parentNode
+        //console.log("COLLECT",parentNode.id, childNode.id, edge.toId, edge.fromId)
+        this._addToContainedEdges(parentNode,childNode,edge);
+      }
+      else {
+        //console.log("REWIRE",parentNode.id, childNode.id, edge.toId, edge.fromId)
+        this._connectEdgeToCluster(parentNode,childNode,edge);
       }
+    }
+    // a contained node has no dynamic edges.
+    childNode.dynamicEdges = [];
 
-      // pick the locale from the array
-      // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each
-      // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root
-      function chooseLocale(names) {
-          var i = 0, j, next, locale, split;
+    // remove circular edges from clusters
+    this._containCircularEdgesFromNode(parentNode,childNode);
 
-          while (i < names.length) {
-              split = normalizeLocale(names[i]).split('-');
-              j = split.length;
-              next = normalizeLocale(names[i + 1]);
-              next = next ? next.split('-') : null;
-              while (j > 0) {
-                  locale = loadLocale(split.slice(0, j).join('-'));
-                  if (locale) {
-                      return locale;
-                  }
-                  if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) {
-                      //the next array item is better than a shallower substring of this one
-                      break;
-                  }
-                  j--;
-              }
-              i++;
-          }
-          return null;
-      }
-
-      function loadLocale(name) {
-          var oldLocale = null;
-          if (!locales[name] && hasModule) {
-              try {
-                  oldLocale = moment.locale();
-                  !(function webpackMissingModule() { var e = new Error("Cannot find module \"./locale\""); e.code = 'MODULE_NOT_FOUND'; throw e; }());
-                  // because defineLocale currently also sets the global locale, we want to undo that for lazy loaded locales
-                  moment.locale(oldLocale);
-              } catch (e) { }
-          }
-          return locales[name];
-      }
 
-      // Return a moment from input, that is local/utc/utcOffset equivalent to
-      // model.
-      function makeAs(input, model) {
-          var res, diff;
-          if (model._isUTC) {
-              res = model.clone();
-              diff = (moment.isMoment(input) || isDate(input) ?
-                      +input : +moment(input)) - (+res);
-              // Use low-level api, because this fn is low-level api.
-              res._d.setTime(+res._d + diff);
-              moment.updateOffset(res, false);
-              return res;
-          } else {
-              return moment(input).local();
-          }
-      }
+    // remove the childNode from the global nodes object
+    delete this.nodes[childNode.id];
 
-      /************************************
-          Locale
-      ************************************/
+    // update the properties of the child and parent
+    var massBefore = parentNode.options.mass;
+    childNode.clusterSession = this.clusterSession;
+    parentNode.options.mass += childNode.options.mass;
+    parentNode.clusterSize += childNode.clusterSize;
+    parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
 
+    // keep track of the clustersessions so we can open the cluster up as it has been formed.
+    if (parentNode.clusterSessions[parentNode.clusterSessions.length - 1] != this.clusterSession) {
+      parentNode.clusterSessions.push(this.clusterSession);
+    }
 
-      extend(Locale.prototype, {
+    // forced clusters only open from screen size and double tap
+    if (force == true) {
+      parentNode.formationScale = 0;
+    }
+    else {
+      parentNode.formationScale = this.scale; // The latest child has been added on this scale
+    }
 
-          set : function (config) {
-              var prop, i;
-              for (i in config) {
-                  prop = config[i];
-                  if (typeof prop === 'function') {
-                      this[i] = prop;
-                  } else {
-                      this['_' + i] = prop;
-                  }
-              }
-              // Lenient ordinal parsing accepts just a number in addition to
-              // number + (possibly) stuff coming from _ordinalParseLenient.
-              this._ordinalParseLenient = new RegExp(this._ordinalParse.source + '|' + /\d{1,2}/.source);
-          },
+    // recalculate the size of the node on the next time the node is rendered
+    parentNode.clearSizeCache();
 
-          _months : 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
-          months : function (m) {
-              return this._months[m.month()];
-          },
+    // set the pop-out scale for the childnode
+    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
 
-          _monthsShort : 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
-          monthsShort : function (m) {
-              return this._monthsShort[m.month()];
-          },
+    // nullify the movement velocity of the child, this is to avoid hectic behaviour
+    childNode.clearVelocity();
 
-          monthsParse : function (monthName, format, strict) {
-              var i, mom, regex;
+    // the mass has altered, preservation of energy dictates the velocity to be updated
+    parentNode.updateVelocity(massBefore);
 
-              if (!this._monthsParse) {
-                  this._monthsParse = [];
-                  this._longMonthsParse = [];
-                  this._shortMonthsParse = [];
-              }
+    // restart the simulation to reorganise all nodes
+    this.moving = true;
+  };
 
-              for (i = 0; i < 12; i++) {
-                  // make the regex if we don't have it already
-                  mom = moment.utc([2000, i]);
-                  if (strict && !this._longMonthsParse[i]) {
-                      this._longMonthsParse[i] = new RegExp('^' + this.months(mom, '').replace('.', '') + '$', 'i');
-                      this._shortMonthsParse[i] = new RegExp('^' + this.monthsShort(mom, '').replace('.', '') + '$', 'i');
-                  }
-                  if (!strict && !this._monthsParse[i]) {
-                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
-                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
-                  }
-                  // test the regex
-                  if (strict && format === 'MMMM' && this._longMonthsParse[i].test(monthName)) {
-                      return i;
-                  } else if (strict && format === 'MMM' && this._shortMonthsParse[i].test(monthName)) {
-                      return i;
-                  } else if (!strict && this._monthsParse[i].test(monthName)) {
-                      return i;
-                  }
-              }
-          },
 
-          _weekdays : 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
-          weekdays : function (m) {
-              return this._weekdays[m.day()];
-          },
+  /**
+   * This adds an edge from the childNode to the contained edges of the parent node
+   *
+   * @param parentNode    | Node object
+   * @param childNode     | Node object
+   * @param edge          | Edge object
+   * @private
+   */
+  exports._addToContainedEdges = function(parentNode, childNode, edge) {
+    // create an array object if it does not yet exist for this childNode
+    if (parentNode.containedEdges[childNode.id] === undefined) {
+      parentNode.containedEdges[childNode.id] = []
+    }
+    // add this edge to the list
+    parentNode.containedEdges[childNode.id].push(edge);
 
-          _weekdaysShort : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
-          weekdaysShort : function (m) {
-              return this._weekdaysShort[m.day()];
-          },
+    // remove the edge from the global edges object
+    delete this.edges[edge.id];
 
-          _weekdaysMin : 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),
-          weekdaysMin : function (m) {
-              return this._weekdaysMin[m.day()];
-          },
+    // remove the edge from the parent object
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      if (parentNode.dynamicEdges[i].id == edge.id) {
+        parentNode.dynamicEdges.splice(i,1);
+        break;
+      }
+    }
+  };
 
-          weekdaysParse : function (weekdayName) {
-              var i, mom, regex;
+  /**
+   * This function connects an edge that was connected to a child node to the parent node.
+   * It keeps track of which nodes it has been connected to with the originalId array.
+   *
+   * @param {Node} parentNode    | Node object
+   * @param {Node} childNode     | Node object
+   * @param {Edge} edge          | Edge object
+   * @private
+   */
+  exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
+    // handle circular edges
+    if (edge.toId == edge.fromId) {
+      this._addToContainedEdges(parentNode, childNode, edge);
+    }
+    else {
+      if (edge.toId == childNode.id) {    // edge connected to other node on the "to" side
+        edge.originalToId.push(childNode.id);
+        edge.to = parentNode;
+        edge.toId = parentNode.id;
+      }
+      else {          // edge connected to other node with the "from" side
+        edge.originalFromId.push(childNode.id);
+        edge.from = parentNode;
+        edge.fromId = parentNode.id;
+      }
 
-              if (!this._weekdaysParse) {
-                  this._weekdaysParse = [];
-              }
+      this._addToReroutedEdges(parentNode,childNode,edge);
+    }
+  };
 
-              for (i = 0; i < 7; i++) {
-                  // make the regex if we don't have it already
-                  if (!this._weekdaysParse[i]) {
-                      mom = moment([2000, 1]).day(i);
-                      regex = '^' + this.weekdays(mom, '') + '|^' + this.weekdaysShort(mom, '') + '|^' + this.weekdaysMin(mom, '');
-                      this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i');
-                  }
-                  // test the regex
-                  if (this._weekdaysParse[i].test(weekdayName)) {
-                      return i;
-                  }
-              }
-          },
 
-          _longDateFormat : {
-              LTS : 'h:mm:ss A',
-              LT : 'h:mm A',
-              L : 'MM/DD/YYYY',
-              LL : 'MMMM D, YYYY',
-              LLL : 'MMMM D, YYYY LT',
-              LLLL : 'dddd, MMMM D, YYYY LT'
-          },
-          longDateFormat : function (key) {
-              var output = this._longDateFormat[key];
-              if (!output && this._longDateFormat[key.toUpperCase()]) {
-                  output = this._longDateFormat[key.toUpperCase()].replace(/MMMM|MM|DD|dddd/g, function (val) {
-                      return val.slice(1);
-                  });
-                  this._longDateFormat[key] = output;
-              }
-              return output;
-          },
+  /**
+   * If a node is connected to itself, a circular edge is drawn. When clustering we want to contain
+   * these edges inside of the cluster.
+   *
+   * @param parentNode
+   * @param childNode
+   * @private
+   */
+  exports._containCircularEdgesFromNode = function(parentNode, childNode) {
+    // manage all the edges connected to the child and parent nodes
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      // handle circular edges
+      if (edge.toId == edge.fromId) {
+        this._addToContainedEdges(parentNode, childNode, edge);
+      }
+    }
+  };
 
-          isPM : function (input) {
-              // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays
-              // Using charAt should be more compatible.
-              return ((input + '').toLowerCase().charAt(0) === 'p');
-          },
 
-          _meridiemParse : /[ap]\.?m?\.?/i,
-          meridiem : function (hours, minutes, isLower) {
-              if (hours > 11) {
-                  return isLower ? 'pm' : 'PM';
-              } else {
-                  return isLower ? 'am' : 'AM';
-              }
-          },
+  /**
+   * This adds an edge from the childNode to the rerouted edges of the parent node
+   *
+   * @param parentNode    | Node object
+   * @param childNode     | Node object
+   * @param edge          | Edge object
+   * @private
+   */
+  exports._addToReroutedEdges = function(parentNode, childNode, edge) {
+    // create an array object if it does not yet exist for this childNode
+    // we store the edge in the rerouted edges so we can restore it when the cluster pops open
+    if (!(parentNode.reroutedEdges.hasOwnProperty(childNode.id))) {
+      parentNode.reroutedEdges[childNode.id] = [];
+    }
+    parentNode.reroutedEdges[childNode.id].push(edge);
 
+    // this edge becomes part of the dynamicEdges of the cluster node
+    parentNode.dynamicEdges.push(edge);
+   };
 
-          _calendar : {
-              sameDay : '[Today at] LT',
-              nextDay : '[Tomorrow at] LT',
-              nextWeek : 'dddd [at] LT',
-              lastDay : '[Yesterday at] LT',
-              lastWeek : '[Last] dddd [at] LT',
-              sameElse : 'L'
-          },
-          calendar : function (key, mom, now) {
-              var output = this._calendar[key];
-              return typeof output === 'function' ? output.apply(mom, [now]) : output;
-          },
 
-          _relativeTime : {
-              future : 'in %s',
-              past : '%s ago',
-              s : 'a few seconds',
-              m : 'a minute',
-              mm : '%d minutes',
-              h : 'an hour',
-              hh : '%d hours',
-              d : 'a day',
-              dd : '%d days',
-              M : 'a month',
-              MM : '%d months',
-              y : 'a year',
-              yy : '%d years'
-          },
 
-          relativeTime : function (number, withoutSuffix, string, isFuture) {
-              var output = this._relativeTime[string];
-              return (typeof output === 'function') ?
-                  output(number, withoutSuffix, string, isFuture) :
-                  output.replace(/%d/i, number);
-          },
+  /**
+   * This function connects an edge that was connected to a cluster node back to the child node.
+   *
+   * @param parentNode    | Node object
+   * @param childNode     | Node object
+   * @private
+   */
+  exports._connectEdgeBackToChild = function(parentNode, childNode) {
+    if (parentNode.reroutedEdges.hasOwnProperty(childNode.id)) {
+      for (var i = 0; i < parentNode.reroutedEdges[childNode.id].length; i++) {
+        var edge = parentNode.reroutedEdges[childNode.id][i];
+        if (edge.originalFromId[edge.originalFromId.length-1] == childNode.id) {
+          edge.originalFromId.pop();
+          edge.fromId = childNode.id;
+          edge.from = childNode;
+        }
+        else {
+          edge.originalToId.pop();
+          edge.toId = childNode.id;
+          edge.to = childNode;
+        }
 
-          pastFuture : function (diff, output) {
-              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
-              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
-          },
+        // append this edge to the list of edges connecting to the childnode
+        childNode.dynamicEdges.push(edge);
 
-          ordinal : function (number) {
-              return this._ordinal.replace('%d', number);
-          },
-          _ordinal : '%d',
-          _ordinalParse : /\d{1,2}/,
+        // remove the edge from the parent object
+        for (var j = 0; j < parentNode.dynamicEdges.length; j++) {
+          if (parentNode.dynamicEdges[j].id == edge.id) {
+            parentNode.dynamicEdges.splice(j,1);
+            break;
+          }
+        }
+      }
+      // remove the entry from the rerouted edges
+      delete parentNode.reroutedEdges[childNode.id];
+    }
+  };
 
-          preparse : function (string) {
-              return string;
-          },
 
-          postformat : function (string) {
-              return string;
-          },
+  /**
+   * When loops are clustered, an edge can be both in the rerouted array and the contained array.
+   * This function is called last to verify that all edges in dynamicEdges are in fact connected to the
+   * parentNode
+   *
+   * @param parentNode    | Node object
+   * @private
+   */
+  exports._validateEdges = function(parentNode) {
+    var dynamicEdges = []
+    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+      var edge = parentNode.dynamicEdges[i];
+      if (parentNode.id == edge.toId || parentNode.id == edge.fromId) {
+        dynamicEdges.push(edge);
+      }
+    }
+    parentNode.dynamicEdges = dynamicEdges;
+  };
 
-          week : function (mom) {
-              return weekOfYear(mom, this._week.dow, this._week.doy).week;
-          },
 
-          _week : {
-              dow : 0, // Sunday is the first day of the week.
-              doy : 6  // The week that contains Jan 1st is the first week of the year.
-          },
+  /**
+   * This function released the contained edges back into the global domain and puts them back into the
+   * dynamic edges of both parent and child.
+   *
+   * @param {Node} parentNode    |
+   * @param {Node} childNode     |
+   * @private
+   */
+  exports._releaseContainedEdges = function(parentNode, childNode) {
+    for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
+      var edge = parentNode.containedEdges[childNode.id][i];
 
-          firstDayOfWeek : function () {
-              return this._week.dow;
-          },
+      // put the edge back in the global edges object
+      this.edges[edge.id] = edge;
 
-          firstDayOfYear : function () {
-              return this._week.doy;
-          },
+      // put the edge back in the dynamic edges of the child and parent
+      childNode.dynamicEdges.push(edge);
+      parentNode.dynamicEdges.push(edge);
+    }
+    // remove the entry from the contained edges
+    delete parentNode.containedEdges[childNode.id];
 
-          _invalidDate: 'Invalid date',
-          invalidDate: function () {
-              return this._invalidDate;
-          }
-      });
+  };
 
-      /************************************
-          Formatting
-      ************************************/
 
 
-      function removeFormattingTokens(input) {
-          if (input.match(/\[[\s\S]/)) {
-              return input.replace(/^\[|\]$/g, '');
-          }
-          return input.replace(/\\/g, '');
-      }
 
-      function makeFormatFunction(format) {
-          var array = format.match(formattingTokens), i, length;
+  // ------------------- UTILITY FUNCTIONS ---------------------------- //
 
-          for (i = 0, length = array.length; i < length; i++) {
-              if (formatTokenFunctions[array[i]]) {
-                  array[i] = formatTokenFunctions[array[i]];
-              } else {
-                  array[i] = removeFormattingTokens(array[i]);
-              }
-          }
 
-          return function (mom) {
-              var output = '';
-              for (i = 0; i < length; i++) {
-                  output += array[i] instanceof Function ? array[i].call(mom, format) : array[i];
-              }
-              return output;
-          };
+  /**
+   * This updates the node labels for all nodes (for debugging purposes)
+   */
+  exports.updateLabels = function() {
+    var nodeId;
+    // update node labels
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        if (node.clusterSize > 1) {
+          node.label = "[".concat(String(node.clusterSize),"]");
+        }
       }
+    }
 
-      // format date using native date object
-      function formatMoment(m, format) {
-          if (!m.isValid()) {
-              return m.localeData().invalidDate();
+    // update node labels
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.clusterSize == 1) {
+          if (node.originalLabel !== undefined) {
+            node.label = node.originalLabel;
           }
-
-          format = expandFormat(format, m.localeData());
-
-          if (!formatFunctions[format]) {
-              formatFunctions[format] = makeFormatFunction(format);
+          else {
+            node.label = String(node.id);
           }
-
-          return formatFunctions[format](m);
+        }
       }
+    }
 
-      function expandFormat(format, locale) {
-          var i = 5;
-
-          function replaceLongDateFormatTokens(input) {
-              return locale.longDateFormat(input) || input;
-          }
+  //    /* Debug Override */
+  //    for (nodeId in this.nodes) {
+  //      if (this.nodes.hasOwnProperty(nodeId)) {
+  //        node = this.nodes[nodeId];
+  //        node.label = String(node.clusterSize + ":" + node.dynamicEdges.length);
+  //      }
+  //    }
 
-          localFormattingTokens.lastIndex = 0;
-          while (i >= 0 && localFormattingTokens.test(format)) {
-              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
-              localFormattingTokens.lastIndex = 0;
-              i -= 1;
-          }
+  };
 
-          return format;
-      }
 
+  /**
+   * We want to keep the cluster level distribution rather small. This means we do not want unclustered nodes
+   * if the rest of the nodes are already a few cluster levels in.
+   * To fix this we use this function. It determines the min and max cluster level and sends nodes that have not
+   * clustered enough to the clusterToSmallestNeighbours function.
+   */
+  exports.normalizeClusterLevels = function() {
+    var maxLevel = 0;
+    var minLevel = 1e9;
+    var clusterLevel = 0;
+    var nodeId;
 
-      /************************************
-          Parsing
-      ************************************/
-
+    // we loop over all nodes in the list
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        clusterLevel = this.nodes[nodeId].clusterSessions.length;
+        if (maxLevel < clusterLevel) {maxLevel = clusterLevel;}
+        if (minLevel > clusterLevel) {minLevel = clusterLevel;}
+      }
+    }
 
-      // get the regex to find the next token
-      function getParseRegexForToken(token, config) {
-          var a, strict = config._strict;
-          switch (token) {
-          case 'Q':
-              return parseTokenOneDigit;
-          case 'DDDD':
-              return parseTokenThreeDigits;
-          case 'YYYY':
-          case 'GGGG':
-          case 'gggg':
-              return strict ? parseTokenFourDigits : parseTokenOneToFourDigits;
-          case 'Y':
-          case 'G':
-          case 'g':
-              return parseTokenSignedNumber;
-          case 'YYYYYY':
-          case 'YYYYY':
-          case 'GGGGG':
-          case 'ggggg':
-              return strict ? parseTokenSixDigits : parseTokenOneToSixDigits;
-          case 'S':
-              if (strict) {
-                  return parseTokenOneDigit;
-              }
-              /* falls through */
-          case 'SS':
-              if (strict) {
-                  return parseTokenTwoDigits;
-              }
-              /* falls through */
-          case 'SSS':
-              if (strict) {
-                  return parseTokenThreeDigits;
-              }
-              /* falls through */
-          case 'DDD':
-              return parseTokenOneToThreeDigits;
-          case 'MMM':
-          case 'MMMM':
-          case 'dd':
-          case 'ddd':
-          case 'dddd':
-              return parseTokenWord;
-          case 'a':
-          case 'A':
-              return config._locale._meridiemParse;
-          case 'x':
-              return parseTokenOffsetMs;
-          case 'X':
-              return parseTokenTimestampMs;
-          case 'Z':
-          case 'ZZ':
-              return parseTokenTimezone;
-          case 'T':
-              return parseTokenT;
-          case 'SSSS':
-              return parseTokenDigits;
-          case 'MM':
-          case 'DD':
-          case 'YY':
-          case 'GG':
-          case 'gg':
-          case 'HH':
-          case 'hh':
-          case 'mm':
-          case 'ss':
-          case 'ww':
-          case 'WW':
-              return strict ? parseTokenTwoDigits : parseTokenOneOrTwoDigits;
-          case 'M':
-          case 'D':
-          case 'd':
-          case 'H':
-          case 'h':
-          case 'm':
-          case 's':
-          case 'w':
-          case 'W':
-          case 'e':
-          case 'E':
-              return parseTokenOneOrTwoDigits;
-          case 'Do':
-              return strict ? config._locale._ordinalParse : config._locale._ordinalParseLenient;
-          default :
-              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), 'i'));
-              return a;
+    if (maxLevel - minLevel > this.constants.clustering.clusterLevelDifference) {
+      var amountOfNodes = this.nodeIndices.length;
+      var targetLevel = maxLevel - this.constants.clustering.clusterLevelDifference;
+      // we loop over all nodes in the list
+      for (nodeId in this.nodes) {
+        if (this.nodes.hasOwnProperty(nodeId)) {
+          if (this.nodes[nodeId].clusterSessions.length < targetLevel) {
+            this._clusterToSmallestNeighbour(this.nodes[nodeId]);
           }
+        }
       }
-
-      function utcOffsetFromString(string) {
-          string = string || '';
-          var possibleTzMatches = (string.match(parseTokenTimezone) || []),
-              tzChunk = possibleTzMatches[possibleTzMatches.length - 1] || [],
-              parts = (tzChunk + '').match(parseTimezoneChunker) || ['-', 0, 0],
-              minutes = +(parts[1] * 60) + toInt(parts[2]);
-
-          return parts[0] === '+' ? minutes : -minutes;
+      this._updateNodeIndexList();
+      // if a cluster was formed, we increase the clusterSession
+      if (this.nodeIndices.length != amountOfNodes) {
+        this.clusterSession += 1;
       }
+    }
+  };
 
-      // function to convert string input to date
-      function addTimeToArrayFromToken(token, input, config) {
-          var a, datePartArray = config._a;
 
-          switch (token) {
-          // QUARTER
-          case 'Q':
-              if (input != null) {
-                  datePartArray[MONTH] = (toInt(input) - 1) * 3;
-              }
-              break;
-          // MONTH
-          case 'M' : // fall through to MM
-          case 'MM' :
-              if (input != null) {
-                  datePartArray[MONTH] = toInt(input) - 1;
-              }
-              break;
-          case 'MMM' : // fall through to MMMM
-          case 'MMMM' :
-              a = config._locale.monthsParse(input, token, config._strict);
-              // if we didn't find a month name, mark the date as invalid.
-              if (a != null) {
-                  datePartArray[MONTH] = a;
-              } else {
-                  config._pf.invalidMonth = input;
-              }
-              break;
-          // DAY OF MONTH
-          case 'D' : // fall through to DD
-          case 'DD' :
-              if (input != null) {
-                  datePartArray[DATE] = toInt(input);
-              }
-              break;
-          case 'Do' :
-              if (input != null) {
-                  datePartArray[DATE] = toInt(parseInt(
-                              input.match(/\d{1,2}/)[0], 10));
-              }
-              break;
-          // DAY OF YEAR
-          case 'DDD' : // fall through to DDDD
-          case 'DDDD' :
-              if (input != null) {
-                  config._dayOfYear = toInt(input);
-              }
 
-              break;
-          // YEAR
-          case 'YY' :
-              datePartArray[YEAR] = moment.parseTwoDigitYear(input);
-              break;
-          case 'YYYY' :
-          case 'YYYYY' :
-          case 'YYYYYY' :
-              datePartArray[YEAR] = toInt(input);
-              break;
-          // AM / PM
-          case 'a' : // fall through to A
-          case 'A' :
-              config._meridiem = input;
-              // config._isPm = config._locale.isPM(input);
-              break;
-          // HOUR
-          case 'h' : // fall through to hh
-          case 'hh' :
-              config._pf.bigHour = true;
-              /* falls through */
-          case 'H' : // fall through to HH
-          case 'HH' :
-              datePartArray[HOUR] = toInt(input);
-              break;
-          // MINUTE
-          case 'm' : // fall through to mm
-          case 'mm' :
-              datePartArray[MINUTE] = toInt(input);
-              break;
-          // SECOND
-          case 's' : // fall through to ss
-          case 'ss' :
-              datePartArray[SECOND] = toInt(input);
-              break;
-          // MILLISECOND
-          case 'S' :
-          case 'SS' :
-          case 'SSS' :
-          case 'SSSS' :
-              datePartArray[MILLISECOND] = toInt(('0.' + input) * 1000);
-              break;
-          // UNIX OFFSET (MILLISECONDS)
-          case 'x':
-              config._d = new Date(toInt(input));
-              break;
-          // UNIX TIMESTAMP WITH MS
-          case 'X':
-              config._d = new Date(parseFloat(input) * 1000);
-              break;
-          // TIMEZONE
-          case 'Z' : // fall through to ZZ
-          case 'ZZ' :
-              config._useUTC = true;
-              config._tzm = utcOffsetFromString(input);
-              break;
-          // WEEKDAY - human
-          case 'dd':
-          case 'ddd':
-          case 'dddd':
-              a = config._locale.weekdaysParse(input);
-              // if we didn't get a weekday name, mark the date as invalid
-              if (a != null) {
-                  config._w = config._w || {};
-                  config._w['d'] = a;
-              } else {
-                  config._pf.invalidWeekday = input;
-              }
-              break;
-          // WEEK, WEEK DAY - numeric
-          case 'w':
-          case 'ww':
-          case 'W':
-          case 'WW':
-          case 'd':
-          case 'e':
-          case 'E':
-              token = token.substr(0, 1);
-              /* falls through */
-          case 'gggg':
-          case 'GGGG':
-          case 'GGGGG':
-              token = token.substr(0, 2);
-              if (input) {
-                  config._w = config._w || {};
-                  config._w[token] = toInt(input);
-              }
-              break;
-          case 'gg':
-          case 'GG':
-              config._w = config._w || {};
-              config._w[token] = moment.parseTwoDigitYear(input);
-          }
-      }
+  /**
+   * This function determines if the cluster we want to decluster is in the active area
+   * this means around the zoom center
+   *
+   * @param {Node} node
+   * @returns {boolean}
+   * @private
+   */
+  exports._nodeInActiveArea = function(node) {
+    return (
+      Math.abs(node.x - this.areaCenter.x) <= this.constants.clustering.activeAreaBoxSize/this.scale
+        &&
+      Math.abs(node.y - this.areaCenter.y) <= this.constants.clustering.activeAreaBoxSize/this.scale
+      )
+  };
 
-      function dayOfYearFromWeekInfo(config) {
-          var w, weekYear, week, weekday, dow, doy, temp;
 
-          w = config._w;
-          if (w.GG != null || w.W != null || w.E != null) {
-              dow = 1;
-              doy = 4;
+  /**
+   * This is an adaptation of the original repositioning function. This is called if the system is clustered initially
+   * It puts large clusters away from the center and randomizes the order.
+   *
+   */
+  exports.repositionNodes = function() {
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      var node = this.nodes[this.nodeIndices[i]];
+      if ((node.xFixed == false || node.yFixed == false)) {
+        var radius = 10 * 0.1*this.nodeIndices.length * Math.min(100,node.options.mass);
+        var angle = 2 * Math.PI * Math.random();
+        if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
+        if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
+        this._repositionBezierNodes(node);
+      }
+    }
+  };
 
-              // TODO: We need to take the current isoWeekYear, but that depends on
-              // how we interpret now (local, utc, fixed offset). So create
-              // a now version of current config (take local/utc/offset flags, and
-              // create now).
-              weekYear = dfl(w.GG, config._a[YEAR], weekOfYear(moment(), 1, 4).year);
-              week = dfl(w.W, 1);
-              weekday = dfl(w.E, 1);
-          } else {
-              dow = config._locale._week.dow;
-              doy = config._locale._week.doy;
 
-              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
-              week = dfl(w.w, 1);
+  /**
+   * We determine how many connections denote an important hub.
+   * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
+   *
+   * @private
+   */
+  exports._getHubSize = function() {
+    var average = 0;
+    var averageSquared = 0;
+    var hubCounter = 0;
+    var largestHub = 0;
 
-              if (w.d != null) {
-                  // weekday -- low day numbers are considered next week
-                  weekday = w.d;
-                  if (weekday < dow) {
-                      ++week;
-                  }
-              } else if (w.e != null) {
-                  // local weekday -- counting starts from begining of week
-                  weekday = w.e + dow;
-              } else {
-                  // default to begining of week
-                  weekday = dow;
-              }
-          }
-          temp = dayOfYearFromWeeks(weekYear, week, weekday, doy, dow);
+    for (var i = 0; i < this.nodeIndices.length; i++) {
 
-          config._a[YEAR] = temp.year;
-          config._dayOfYear = temp.dayOfYear;
+      var node = this.nodes[this.nodeIndices[i]];
+      if (node.dynamicEdges.length > largestHub) {
+        largestHub = node.dynamicEdges.length;
       }
+      average += node.dynamicEdges.length;
+      averageSquared += Math.pow(node.dynamicEdges.length,2);
+      hubCounter += 1;
+    }
+    average = average / hubCounter;
+    averageSquared = averageSquared / hubCounter;
 
-      // convert an array to a date.
-      // the array should mirror the parameters below
-      // note: all values past the year are optional and will default to the lowest possible value.
-      // [year, month, day , hour, minute, second, millisecond]
-      function dateFromConfig(config) {
-          var i, date, input = [], currentDate, yearToUse;
+    var variance = averageSquared - Math.pow(average,2);
 
-          if (config._d) {
-              return;
-          }
+    var standardDeviation = Math.sqrt(variance);
 
-          currentDate = currentDateArray(config);
+    this.hubThreshold = Math.floor(average + 2*standardDeviation);
 
-          //compute day of the year from weeks and weekdays
-          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
-              dayOfYearFromWeekInfo(config);
-          }
+    // always have at least one to cluster
+    if (this.hubThreshold > largestHub) {
+      this.hubThreshold = largestHub;
+    }
 
-          //if the day of the year is set, figure out what it is
-          if (config._dayOfYear) {
-              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
+  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
+  //  console.log("hubThreshold:",this.hubThreshold);
+  };
 
-              if (config._dayOfYear > daysInYear(yearToUse)) {
-                  config._pf._overflowDayOfYear = true;
-              }
 
-              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
-              config._a[MONTH] = date.getUTCMonth();
-              config._a[DATE] = date.getUTCDate();
+  /**
+   * We reduce the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
+   * with this amount we can cluster specifically on these chains.
+   *
+   * @param   {Number} fraction     | between 0 and 1, the percentage of chains to reduce
+   * @private
+   */
+  exports._reduceAmountOfChains = function(fraction) {
+    this.hubThreshold = 2;
+    var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        if (this.nodes[nodeId].dynamicEdges.length == 2) {
+          if (reduceAmount > 0) {
+            this._formClusterFromHub(this.nodes[nodeId],true,true,1);
+            reduceAmount -= 1;
           }
+        }
+      }
+    }
+  };
 
-          // Default to current date.
-          // * if no year, month, day of month are given, default to today
-          // * if day of month is given, default month and year
-          // * if month is given, default only year
-          // * if year is given, don't default anything
-          for (i = 0; i < 3 && config._a[i] == null; ++i) {
-              config._a[i] = input[i] = currentDate[i];
-          }
+  /**
+   * We get the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
+   * with this amount we can cluster specifically on these chains.
+   *
+   * @private
+   */
+  exports._getChainFraction = function() {
+    var chains = 0;
+    var total = 0;
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        if (this.nodes[nodeId].dynamicEdges.length == 2) {
+          chains += 1;
+        }
+        total += 1;
+      }
+    }
+    return chains/total;
+  };
 
-          // Zero out whatever was not defaulted, including time
-          for (; i < 7; i++) {
-              config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
-          }
 
-          // Check for 24:00:00.000
-          if (config._a[HOUR] === 24 &&
-                  config._a[MINUTE] === 0 &&
-                  config._a[SECOND] === 0 &&
-                  config._a[MILLISECOND] === 0) {
-              config._nextDay = true;
-              config._a[HOUR] = 0;
-          }
+/***/ },
+/* 59 */
+/***/ function(module, exports, __webpack_require__) {
 
-          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
-          // Apply timezone offset from input. The actual utcOffset can be changed
-          // with parseZone.
-          if (config._tzm != null) {
-              config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);
-          }
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(40);
 
-          if (config._nextDay) {
-              config._a[HOUR] = 24;
-          }
-      }
+  /**
+   * Creation of the SectorMixin var.
+   *
+   * This contains all the functions the Network object can use to employ the sector system.
+   * The sector system is always used by Network, though the benefits only apply to the use of clustering.
+   * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
+   */
 
-      function dateFromObject(config) {
-          var normalizedInput;
+  /**
+   * This function is only called by the setData function of the Network object.
+   * This loads the global references into the active sector. This initializes the sector.
+   *
+   * @private
+   */
+  exports._putDataInSector = function() {
+    this.sectors["active"][this._sector()].nodes = this.nodes;
+    this.sectors["active"][this._sector()].edges = this.edges;
+    this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices;
+  };
 
-          if (config._d) {
-              return;
-          }
 
-          normalizedInput = normalizeObjectUnits(config._i);
-          config._a = [
-              normalizedInput.year,
-              normalizedInput.month,
-              normalizedInput.day || normalizedInput.date,
-              normalizedInput.hour,
-              normalizedInput.minute,
-              normalizedInput.second,
-              normalizedInput.millisecond
-          ];
+  /**
+   *  /**
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the supplied (active) sector. If a type is defined, do the specific type
+   *
+   * @param {String} sectorId
+   * @param {String} [sectorType] | "active" or "frozen"
+   * @private
+   */
+  exports._switchToSector = function(sectorId, sectorType) {
+    if (sectorType === undefined || sectorType == "active") {
+      this._switchToActiveSector(sectorId);
+    }
+    else {
+      this._switchToFrozenSector(sectorId);
+    }
+  };
 
-          dateFromConfig(config);
-      }
 
-      function currentDateArray(config) {
-          var now = new Date();
-          if (config._useUTC) {
-              return [
-                  now.getUTCFullYear(),
-                  now.getUTCMonth(),
-                  now.getUTCDate()
-              ];
-          } else {
-              return [now.getFullYear(), now.getMonth(), now.getDate()];
-          }
-      }
-
-      // date from string and format string
-      function makeDateFromStringAndFormat(config) {
-          if (config._f === moment.ISO_8601) {
-              parseISO(config);
-              return;
-          }
+  /**
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the supplied active sector.
+   *
+   * @param sectorId
+   * @private
+   */
+  exports._switchToActiveSector = function(sectorId) {
+    this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"];
+    this.nodes       = this.sectors["active"][sectorId]["nodes"];
+    this.edges       = this.sectors["active"][sectorId]["edges"];
+  };
 
-          config._a = [];
-          config._pf.empty = true;
 
-          // This array is used to make a Date, either with `new Date` or `Date.UTC`
-          var string = '' + config._i,
-              i, parsedInput, tokens, token, skipped,
-              stringLength = string.length,
-              totalParsedInputLength = 0;
+  /**
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the supplied active sector.
+   *
+   * @private
+   */
+  exports._switchToSupportSector = function() {
+    this.nodeIndices = this.sectors["support"]["nodeIndices"];
+    this.nodes       = this.sectors["support"]["nodes"];
+    this.edges       = this.sectors["support"]["edges"];
+  };
 
-          tokens = expandFormat(config._f, config._locale).match(formattingTokens) || [];
 
-          for (i = 0; i < tokens.length; i++) {
-              token = tokens[i];
-              parsedInput = (string.match(getParseRegexForToken(token, config)) || [])[0];
-              if (parsedInput) {
-                  skipped = string.substr(0, string.indexOf(parsedInput));
-                  if (skipped.length > 0) {
-                      config._pf.unusedInput.push(skipped);
-                  }
-                  string = string.slice(string.indexOf(parsedInput) + parsedInput.length);
-                  totalParsedInputLength += parsedInput.length;
-              }
-              // don't parse if it's not a known token
-              if (formatTokenFunctions[token]) {
-                  if (parsedInput) {
-                      config._pf.empty = false;
-                  }
-                  else {
-                      config._pf.unusedTokens.push(token);
-                  }
-                  addTimeToArrayFromToken(token, parsedInput, config);
-              }
-              else if (config._strict && !parsedInput) {
-                  config._pf.unusedTokens.push(token);
-              }
-          }
+  /**
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the supplied frozen sector.
+   *
+   * @param sectorId
+   * @private
+   */
+  exports._switchToFrozenSector = function(sectorId) {
+    this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"];
+    this.nodes       = this.sectors["frozen"][sectorId]["nodes"];
+    this.edges       = this.sectors["frozen"][sectorId]["edges"];
+  };
 
-          // add remaining unparsed input length to the string
-          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
-          if (string.length > 0) {
-              config._pf.unusedInput.push(string);
-          }
 
-          // clear _12h flag if hour is <= 12
-          if (config._pf.bigHour === true && config._a[HOUR] <= 12) {
-              config._pf.bigHour = undefined;
-          }
-          // handle meridiem
-          config._a[HOUR] = meridiemFixWrap(config._locale, config._a[HOUR],
-                  config._meridiem);
-          dateFromConfig(config);
-          checkOverflow(config);
-      }
+  /**
+   * This function sets the global references to nodes, edges and nodeIndices back to
+   * those of the currently active sector.
+   *
+   * @private
+   */
+  exports._loadLatestSector = function() {
+    this._switchToSector(this._sector());
+  };
 
-      function unescapeFormat(s) {
-          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
-              return p1 || p2 || p3 || p4;
-          });
-      }
 
-      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
-      function regexpEscape(s) {
-          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
-      }
+  /**
+   * This function returns the currently active sector Id
+   *
+   * @returns {String}
+   * @private
+   */
+  exports._sector = function() {
+    return this.activeSector[this.activeSector.length-1];
+  };
 
-      // date from string and array of format strings
-      function makeDateFromStringAndArray(config) {
-          var tempConfig,
-              bestMoment,
 
-              scoreToBeat,
-              i,
-              currentScore;
+  /**
+   * This function returns the previously active sector Id
+   *
+   * @returns {String}
+   * @private
+   */
+  exports._previousSector = function() {
+    if (this.activeSector.length > 1) {
+      return this.activeSector[this.activeSector.length-2];
+    }
+    else {
+      throw new TypeError('there are not enough sectors in the this.activeSector array.');
+    }
+  };
 
-          if (config._f.length === 0) {
-              config._pf.invalidFormat = true;
-              config._d = new Date(NaN);
-              return;
-          }
 
-          for (i = 0; i < config._f.length; i++) {
-              currentScore = 0;
-              tempConfig = copyConfig({}, config);
-              if (config._useUTC != null) {
-                  tempConfig._useUTC = config._useUTC;
-              }
-              tempConfig._pf = defaultParsingFlags();
-              tempConfig._f = config._f[i];
-              makeDateFromStringAndFormat(tempConfig);
+  /**
+   * We add the active sector at the end of the this.activeSector array
+   * This ensures it is the currently active sector returned by _sector() and it reaches the top
+   * of the activeSector stack. When we reverse our steps we move from the end to the beginning of this stack.
+   *
+   * @param newId
+   * @private
+   */
+  exports._setActiveSector = function(newId) {
+    this.activeSector.push(newId);
+  };
 
-              if (!isValid(tempConfig)) {
-                  continue;
-              }
 
-              // if there is any input that was not parsed add a penalty for that format
-              currentScore += tempConfig._pf.charsLeftOver;
+  /**
+   * We remove the currently active sector id from the active sector stack. This happens when
+   * we reactivate the previously active sector
+   *
+   * @private
+   */
+  exports._forgetLastSector = function() {
+    this.activeSector.pop();
+  };
 
-              //or tokens
-              currentScore += tempConfig._pf.unusedTokens.length * 10;
 
-              tempConfig._pf.score = currentScore;
+  /**
+   * This function creates a new active sector with the supplied newId. This newId
+   * is the expanding node id.
+   *
+   * @param {String} newId   | Id of the new active sector
+   * @private
+   */
+  exports._createNewSector = function(newId) {
+    // create the new sector
+    this.sectors["active"][newId] = {"nodes":{},
+                                     "edges":{},
+                                     "nodeIndices":[],
+                                     "formationScale": this.scale,
+                                     "drawingNode": undefined};
 
-              if (scoreToBeat == null || currentScore < scoreToBeat) {
-                  scoreToBeat = currentScore;
-                  bestMoment = tempConfig;
-              }
+    // create the new sector render node. This gives visual feedback that you are in a new sector.
+    this.sectors["active"][newId]['drawingNode'] = new Node(
+        {id:newId,
+          color: {
+            background: "#eaefef",
+            border: "495c5e"
           }
+        },{},{},this.constants);
+    this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
+  };
 
-          extend(config, bestMoment || tempConfig);
-      }
 
-      // date from iso format
-      function parseISO(config) {
-          var i, l,
-              string = config._i,
-              match = isoRegex.exec(string);
+  /**
+   * This function removes the currently active sector. This is called when we create a new
+   * active sector.
+   *
+   * @param {String} sectorId   | Id of the active sector that will be removed
+   * @private
+   */
+  exports._deleteActiveSector = function(sectorId) {
+    delete this.sectors["active"][sectorId];
+  };
 
-          if (match) {
-              config._pf.iso = true;
-              for (i = 0, l = isoDates.length; i < l; i++) {
-                  if (isoDates[i][1].exec(string)) {
-                      // match[5] should be 'T' or undefined
-                      config._f = isoDates[i][0] + (match[6] || ' ');
-                      break;
-                  }
-              }
-              for (i = 0, l = isoTimes.length; i < l; i++) {
-                  if (isoTimes[i][1].exec(string)) {
-                      config._f += isoTimes[i][0];
-                      break;
-                  }
-              }
-              if (string.match(parseTokenTimezone)) {
-                  config._f += 'Z';
-              }
-              makeDateFromStringAndFormat(config);
-          } else {
-              config._isValid = false;
-          }
-      }
 
-      // date from iso format or fallback
-      function makeDateFromString(config) {
-          parseISO(config);
-          if (config._isValid === false) {
-              delete config._isValid;
-              moment.createFromInputFallback(config);
-          }
-      }
+  /**
+   * This function removes the currently active sector. This is called when we reactivate
+   * the previously active sector.
+   *
+   * @param {String} sectorId   | Id of the active sector that will be removed
+   * @private
+   */
+  exports._deleteFrozenSector = function(sectorId) {
+    delete this.sectors["frozen"][sectorId];
+  };
 
-      function map(arr, fn) {
-          var res = [], i;
-          for (i = 0; i < arr.length; ++i) {
-              res.push(fn(arr[i], i));
-          }
-          return res;
-      }
 
-      function makeDateFromInput(config) {
-          var input = config._i, matched;
-          if (input === undefined) {
-              config._d = new Date();
-          } else if (isDate(input)) {
-              config._d = new Date(+input);
-          } else if ((matched = aspNetJsonRegex.exec(input)) !== null) {
-              config._d = new Date(+matched[1]);
-          } else if (typeof input === 'string') {
-              makeDateFromString(config);
-          } else if (isArray(input)) {
-              config._a = map(input.slice(0), function (obj) {
-                  return parseInt(obj, 10);
-              });
-              dateFromConfig(config);
-          } else if (typeof(input) === 'object') {
-              dateFromObject(config);
-          } else if (typeof(input) === 'number') {
-              // from milliseconds
-              config._d = new Date(input);
-          } else {
-              moment.createFromInputFallback(config);
-          }
-      }
+  /**
+   * Freezing an active sector means moving it from the "active" object to the "frozen" object.
+   * We copy the references, then delete the active entree.
+   *
+   * @param sectorId
+   * @private
+   */
+  exports._freezeSector = function(sectorId) {
+    // we move the set references from the active to the frozen stack.
+    this.sectors["frozen"][sectorId] = this.sectors["active"][sectorId];
 
-      function makeDate(y, m, d, h, M, s, ms) {
-          //can't just apply() to create a date:
-          //http://stackoverflow.com/questions/181348/instantiating-a-javascript-object-by-calling-prototype-constructor-apply
-          var date = new Date(y, m, d, h, M, s, ms);
+    // we have moved the sector data into the frozen set, we now remove it from the active set
+    this._deleteActiveSector(sectorId);
+  };
 
-          //the date constructor doesn't accept years < 1970
-          if (y < 1970) {
-              date.setFullYear(y);
-          }
-          return date;
-      }
 
-      function makeUTCDate(y) {
-          var date = new Date(Date.UTC.apply(null, arguments));
-          if (y < 1970) {
-              date.setUTCFullYear(y);
-          }
-          return date;
-      }
+  /**
+   * This is the reverse operation of _freezeSector. Activating means moving the sector from the "frozen"
+   * object to the "active" object.
+   *
+   * @param sectorId
+   * @private
+   */
+  exports._activateSector = function(sectorId) {
+    // we move the set references from the frozen to the active stack.
+    this.sectors["active"][sectorId] = this.sectors["frozen"][sectorId];
 
-      function parseWeekday(input, locale) {
-          if (typeof input === 'string') {
-              if (!isNaN(input)) {
-                  input = parseInt(input, 10);
-              }
-              else {
-                  input = locale.weekdaysParse(input);
-                  if (typeof input !== 'number') {
-                      return null;
-                  }
-              }
-          }
-          return input;
-      }
+    // we have moved the sector data into the active set, we now remove it from the frozen stack
+    this._deleteFrozenSector(sectorId);
+  };
 
-      /************************************
-          Relative Time
-      ************************************/
 
+  /**
+   * This function merges the data from the currently active sector with a frozen sector. This is used
+   * in the process of reverting back to the previously active sector.
+   * The data that is placed in the frozen (the previously active) sector is the node that has been removed from it
+   * upon the creation of a new active sector.
+   *
+   * @param sectorId
+   * @private
+   */
+  exports._mergeThisWithFrozen = function(sectorId) {
+    // copy all nodes
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        this.sectors["frozen"][sectorId]["nodes"][nodeId] = this.nodes[nodeId];
+      }
+    }
 
-      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
-      function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) {
-          return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+    // copy all edges (if not fully clustered, else there are no edges)
+    for (var edgeId in this.edges) {
+      if (this.edges.hasOwnProperty(edgeId)) {
+        this.sectors["frozen"][sectorId]["edges"][edgeId] = this.edges[edgeId];
       }
+    }
 
-      function relativeTime(posNegDuration, withoutSuffix, locale) {
-          var duration = moment.duration(posNegDuration).abs(),
-              seconds = round(duration.as('s')),
-              minutes = round(duration.as('m')),
-              hours = round(duration.as('h')),
-              days = round(duration.as('d')),
-              months = round(duration.as('M')),
-              years = round(duration.as('y')),
+    // merge the nodeIndices
+    for (var i = 0; i < this.nodeIndices.length; i++) {
+      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
+    }
+  };
 
-              args = seconds < relativeTimeThresholds.s && ['s', seconds] ||
-                  minutes === 1 && ['m'] ||
-                  minutes < relativeTimeThresholds.m && ['mm', minutes] ||
-                  hours === 1 && ['h'] ||
-                  hours < relativeTimeThresholds.h && ['hh', hours] ||
-                  days === 1 && ['d'] ||
-                  days < relativeTimeThresholds.d && ['dd', days] ||
-                  months === 1 && ['M'] ||
-                  months < relativeTimeThresholds.M && ['MM', months] ||
-                  years === 1 && ['y'] || ['yy', years];
 
-          args[2] = withoutSuffix;
-          args[3] = +posNegDuration > 0;
-          args[4] = locale;
-          return substituteTimeAgo.apply({}, args);
-      }
+  /**
+   * This clusters the sector to one cluster. It was a single cluster before this process started so
+   * we revert to that state. The clusterToFit function with a maximum size of 1 node does this.
+   *
+   * @private
+   */
+  exports._collapseThisToSingleCluster = function() {
+    this.clusterToFit(1,false);
+  };
 
 
-      /************************************
-          Week of Year
-      ************************************/
+  /**
+   * We create a new active sector from the node that we want to open.
+   *
+   * @param node
+   * @private
+   */
+  exports._addSector = function(node) {
+    // this is the currently active sector
+    var sector = this._sector();
 
+  //    // this should allow me to select nodes from a frozen set.
+  //    if (this.sectors['active'][sector]["nodes"].hasOwnProperty(node.id)) {
+  //      console.log("the node is part of the active sector");
+  //    }
+  //    else {
+  //      console.log("I dont know what the fuck happened!!");
+  //    }
 
-      // firstDayOfWeek       0 = sun, 6 = sat
-      //                      the day of the week that starts the week
-      //                      (usually sunday or monday)
-      // firstDayOfWeekOfYear 0 = sun, 6 = sat
-      //                      the first week is the week that contains the first
-      //                      of this day of the week
-      //                      (eg. ISO weeks use thursday (4))
-      function weekOfYear(mom, firstDayOfWeek, firstDayOfWeekOfYear) {
-          var end = firstDayOfWeekOfYear - firstDayOfWeek,
-              daysToDayOfWeek = firstDayOfWeekOfYear - mom.day(),
-              adjustedMoment;
+    // when we switch to a new sector, we remove the node that will be expanded from the current nodes list.
+    delete this.nodes[node.id];
 
+    var unqiueIdentifier = util.randomUUID();
 
-          if (daysToDayOfWeek > end) {
-              daysToDayOfWeek -= 7;
-          }
+    // we fully freeze the currently active sector
+    this._freezeSector(sector);
 
-          if (daysToDayOfWeek < end - 7) {
-              daysToDayOfWeek += 7;
-          }
+    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
+    this._createNewSector(unqiueIdentifier);
 
-          adjustedMoment = moment(mom).add(daysToDayOfWeek, 'd');
-          return {
-              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
-              year: adjustedMoment.year()
-          };
-      }
+    // we add the active sector to the sectors array to be able to revert these steps later on
+    this._setActiveSector(unqiueIdentifier);
 
-      //http://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday
-      function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) {
-          var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear;
+    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
+    this._switchToSector(this._sector());
 
-          d = d === 0 ? 7 : d;
-          weekday = weekday != null ? weekday : firstDayOfWeek;
-          daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0);
-          dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1;
+    // finally we add the node we removed from our previous active sector to the new active sector
+    this.nodes[node.id] = node;
+  };
 
-          return {
-              year: dayOfYear > 0 ? year : year - 1,
-              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
-          };
-      }
 
-      /************************************
-          Top Level Functions
-      ************************************/
+  /**
+   * We close the sector that is currently open and revert back to the one before.
+   * If the active sector is the "default" sector, nothing happens.
+   *
+   * @private
+   */
+  exports._collapseSector = function() {
+    // the currently active sector
+    var sector = this._sector();
 
-      function makeMoment(config) {
-          var input = config._i,
-              format = config._f,
-              res;
+    // we cannot collapse the default sector
+    if (sector != "default") {
+      if ((this.nodeIndices.length == 1) ||
+       (this.sectors["active"][sector]["drawingNode"].width*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
+       (this.sectors["active"][sector]["drawingNode"].height*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
+        var previousSector = this._previousSector();
 
-          config._locale = config._locale || moment.localeData(config._l);
+        // we collapse the sector back to a single cluster
+        this._collapseThisToSingleCluster();
 
-          if (input === null || (format === undefined && input === '')) {
-              return moment.invalid({nullInput: true});
-          }
+        // we move the remaining nodes, edges and nodeIndices to the previous sector.
+        // This previous sector is the one we will reactivate
+        this._mergeThisWithFrozen(previousSector);
 
-          if (typeof input === 'string') {
-              config._i = input = config._locale.preparse(input);
-          }
+        // the previously active (frozen) sector now has all the data from the currently active sector.
+        // we can now delete the active sector.
+        this._deleteActiveSector(sector);
 
-          if (moment.isMoment(input)) {
-              return new Moment(input, true);
-          } else if (format) {
-              if (isArray(format)) {
-                  makeDateFromStringAndArray(config);
-              } else {
-                  makeDateFromStringAndFormat(config);
-              }
-          } else {
-              makeDateFromInput(config);
-          }
+        // we activate the previously active (and currently frozen) sector.
+        this._activateSector(previousSector);
 
-          res = new Moment(config);
-          if (res._nextDay) {
-              // Adding is smart enough around DST
-              res.add(1, 'd');
-              res._nextDay = undefined;
-          }
+        // we load the references from the newly active sector into the global references
+        this._switchToSector(previousSector);
 
-          return res;
+        // we forget the previously active sector because we reverted to the one before
+        this._forgetLastSector();
+
+        // finally, we update the node index list.
+        this._updateNodeIndexList();
+
+        // we refresh the list with calulation nodes and calculation node indices.
+        this._updateCalculationNodes();
       }
+    }
+  };
 
-      moment = function (input, format, locale, strict) {
-          var c;
 
-          if (typeof(locale) === 'boolean') {
-              strict = locale;
-              locale = undefined;
+  /**
+   * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
+   *
+   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
+   *                              |   we dont pass the function itself because then the "this" is the window object
+   *                              |   instead of the Network object
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
+   * @private
+   */
+  exports._doInAllActiveSectors = function(runFunction,argument) {
+    var returnValues = [];
+    if (argument === undefined) {
+      for (var sector in this.sectors["active"]) {
+        if (this.sectors["active"].hasOwnProperty(sector)) {
+          // switch the global references to those of this sector
+          this._switchToActiveSector(sector);
+          returnValues.push( this[runFunction]() );
+        }
+      }
+    }
+    else {
+      for (var sector in this.sectors["active"]) {
+        if (this.sectors["active"].hasOwnProperty(sector)) {
+          // switch the global references to those of this sector
+          this._switchToActiveSector(sector);
+          var args = Array.prototype.splice.call(arguments, 1);
+          if (args.length > 1) {
+            returnValues.push( this[runFunction](args[0],args[1]) );
           }
-          // object construction must be done this way.
-          // https://github.com/moment/moment/issues/1423
-          c = {};
-          c._isAMomentObject = true;
-          c._i = input;
-          c._f = format;
-          c._l = locale;
-          c._strict = strict;
-          c._isUTC = false;
-          c._pf = defaultParsingFlags();
+          else {
+            returnValues.push( this[runFunction](argument) );
+          }
+        }
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+    return returnValues;
+  };
 
-          return makeMoment(c);
-      };
 
-      moment.suppressDeprecationWarnings = false;
+  /**
+   * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
+   *
+   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
+   *                              |   we dont pass the function itself because then the "this" is the window object
+   *                              |   instead of the Network object
+   * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
+   * @private
+   */
+  exports._doInSupportSector = function(runFunction,argument) {
+    var returnValues = false;
+    if (argument === undefined) {
+      this._switchToSupportSector();
+      returnValues = this[runFunction]();
+    }
+    else {
+      this._switchToSupportSector();
+      var args = Array.prototype.splice.call(arguments, 1);
+      if (args.length > 1) {
+        returnValues = this[runFunction](args[0],args[1]);
+      }
+      else {
+        returnValues = this[runFunction](argument);
+      }
+    }
+    // we revert the global references back to our active sector
+    this._loadLatestSector();
+    return returnValues;
+  };
 
-      moment.createFromInputFallback = deprecate(
-          'moment construction falls back to js Date. This is ' +
-          'discouraged and will be removed in upcoming major ' +
-          'release. Please refer to ' +
-          'https://github.com/moment/moment/issues/1407 for more info.',
-          function (config) {
-              config._d = new Date(config._i + (config._useUTC ? ' UTC' : ''));
-          }
-      );
 
-      // Pick a moment m from moments so that m[fn](other) is true for all
-      // other. This relies on the function fn to be transitive.
-      //
-      // moments should either be an array of moment objects or an array, whose
-      // first element is an array of moment objects.
-      function pickBy(fn, moments) {
-          var res, i;
-          if (moments.length === 1 && isArray(moments[0])) {
-              moments = moments[0];
-          }
-          if (!moments.length) {
-              return moment();
+  /**
+   * This runs a function in all frozen sectors. This is used in the _redraw().
+   *
+   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
+   *                              |   we don't pass the function itself because then the "this" is the window object
+   *                              |   instead of the Network object
+   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
+   * @private
+   */
+  exports._doInAllFrozenSectors = function(runFunction,argument) {
+    if (argument === undefined) {
+      for (var sector in this.sectors["frozen"]) {
+        if (this.sectors["frozen"].hasOwnProperty(sector)) {
+          // switch the global references to those of this sector
+          this._switchToFrozenSector(sector);
+          this[runFunction]();
+        }
+      }
+    }
+    else {
+      for (var sector in this.sectors["frozen"]) {
+        if (this.sectors["frozen"].hasOwnProperty(sector)) {
+          // switch the global references to those of this sector
+          this._switchToFrozenSector(sector);
+          var args = Array.prototype.splice.call(arguments, 1);
+          if (args.length > 1) {
+            this[runFunction](args[0],args[1]);
           }
-          res = moments[0];
-          for (i = 1; i < moments.length; ++i) {
-              if (moments[i][fn](res)) {
-                  res = moments[i];
-              }
+          else {
+            this[runFunction](argument);
           }
-          return res;
+        }
       }
+    }
+    this._loadLatestSector();
+  };
 
-      moment.min = function () {
-          var args = [].slice.call(arguments, 0);
-
-          return pickBy('isBefore', args);
-      };
-
-      moment.max = function () {
-          var args = [].slice.call(arguments, 0);
-
-          return pickBy('isAfter', args);
-      };
 
-      // creating with utc
-      moment.utc = function (input, format, locale, strict) {
-          var c;
+  /**
+   * This runs a function in all sectors. This is used in the _redraw().
+   *
+   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
+   *                              |   we don't pass the function itself because then the "this" is the window object
+   *                              |   instead of the Network object
+   * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
+   * @private
+   */
+  exports._doInAllSectors = function(runFunction,argument) {
+    var args = Array.prototype.splice.call(arguments, 1);
+    if (argument === undefined) {
+      this._doInAllActiveSectors(runFunction);
+      this._doInAllFrozenSectors(runFunction);
+    }
+    else {
+      if (args.length > 1) {
+        this._doInAllActiveSectors(runFunction,args[0],args[1]);
+        this._doInAllFrozenSectors(runFunction,args[0],args[1]);
+      }
+      else {
+        this._doInAllActiveSectors(runFunction,argument);
+        this._doInAllFrozenSectors(runFunction,argument);
+      }
+    }
+  };
 
-          if (typeof(locale) === 'boolean') {
-              strict = locale;
-              locale = undefined;
-          }
-          // object construction must be done this way.
-          // https://github.com/moment/moment/issues/1423
-          c = {};
-          c._isAMomentObject = true;
-          c._useUTC = true;
-          c._isUTC = true;
-          c._l = locale;
-          c._i = input;
-          c._f = format;
-          c._strict = strict;
-          c._pf = defaultParsingFlags();
 
-          return makeMoment(c).utc();
-      };
+  /**
+   * This clears the nodeIndices list. We cannot use this.nodeIndices = [] because we would break the link with the
+   * active sector. Thus we clear the nodeIndices in the active sector, then reconnect the this.nodeIndices to it.
+   *
+   * @private
+   */
+  exports._clearNodeIndexList = function() {
+    var sector = this._sector();
+    this.sectors["active"][sector]["nodeIndices"] = [];
+    this.nodeIndices = this.sectors["active"][sector]["nodeIndices"];
+  };
 
-      // creating with unix timestamp (in seconds)
-      moment.unix = function (input) {
-          return moment(input * 1000);
-      };
 
-      // duration
-      moment.duration = function (input, key) {
-          var duration = input,
-              // matching against regexp is expensive, do it on demand
-              match = null,
-              sign,
-              ret,
-              parseIso,
-              diffRes;
+  /**
+   * Draw the encompassing sector node
+   *
+   * @param ctx
+   * @param sectorType
+   * @private
+   */
+  exports._drawSectorNodes = function(ctx,sectorType) {
+    var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
+    for (var sector in this.sectors[sectorType]) {
+      if (this.sectors[sectorType].hasOwnProperty(sector)) {
+        if (this.sectors[sectorType][sector]["drawingNode"] !== undefined) {
 
-          if (moment.isDuration(input)) {
-              duration = {
-                  ms: input._milliseconds,
-                  d: input._days,
-                  M: input._months
-              };
-          } else if (typeof input === 'number') {
-              duration = {};
-              if (key) {
-                  duration[key] = input;
-              } else {
-                  duration.milliseconds = input;
-              }
-          } else if (!!(match = aspNetTimeSpanJsonRegex.exec(input))) {
-              sign = (match[1] === '-') ? -1 : 1;
-              duration = {
-                  y: 0,
-                  d: toInt(match[DATE]) * sign,
-                  h: toInt(match[HOUR]) * sign,
-                  m: toInt(match[MINUTE]) * sign,
-                  s: toInt(match[SECOND]) * sign,
-                  ms: toInt(match[MILLISECOND]) * sign
-              };
-          } else if (!!(match = isoDurationRegex.exec(input))) {
-              sign = (match[1] === '-') ? -1 : 1;
-              parseIso = function (inp) {
-                  // We'd normally use ~~inp for this, but unfortunately it also
-                  // converts floats to ints.
-                  // inp may be undefined, so careful calling replace on it.
-                  var res = inp && parseFloat(inp.replace(',', '.'));
-                  // apply sign while we're at it
-                  return (isNaN(res) ? 0 : res) * sign;
-              };
-              duration = {
-                  y: parseIso(match[2]),
-                  M: parseIso(match[3]),
-                  d: parseIso(match[4]),
-                  h: parseIso(match[5]),
-                  m: parseIso(match[6]),
-                  s: parseIso(match[7]),
-                  w: parseIso(match[8])
-              };
-          } else if (duration == null) {// checks for null or undefined
-              duration = {};
-          } else if (typeof duration === 'object' &&
-                  ('from' in duration || 'to' in duration)) {
-              diffRes = momentsDifference(moment(duration.from), moment(duration.to));
+          this._switchToSector(sector,sectorType);
 
-              duration = {};
-              duration.ms = diffRes.milliseconds;
-              duration.M = diffRes.months;
+          minY = 1e9; maxY = -1e9; minX = 1e9; maxX = -1e9;
+          for (var nodeId in this.nodes) {
+            if (this.nodes.hasOwnProperty(nodeId)) {
+              node = this.nodes[nodeId];
+              node.resize(ctx);
+              if (minX > node.x - 0.5 * node.width) {minX = node.x - 0.5 * node.width;}
+              if (maxX < node.x + 0.5 * node.width) {maxX = node.x + 0.5 * node.width;}
+              if (minY > node.y - 0.5 * node.height) {minY = node.y - 0.5 * node.height;}
+              if (maxY < node.y + 0.5 * node.height) {maxY = node.y + 0.5 * node.height;}
+            }
           }
+          node = this.sectors[sectorType][sector]["drawingNode"];
+          node.x = 0.5 * (maxX + minX);
+          node.y = 0.5 * (maxY + minY);
+          node.width = 2 * (node.x - minX);
+          node.height = 2 * (node.y - minY);
+          node.options.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
+          node.setScale(this.scale);
+          node._drawCircle(ctx);
+        }
+      }
+    }
+  };
 
-          ret = new Duration(duration);
+  exports._drawAllSectorNodes = function(ctx) {
+    this._drawSectorNodes(ctx,"frozen");
+    this._drawSectorNodes(ctx,"active");
+    this._loadLatestSector();
+  };
 
-          if (moment.isDuration(input) && hasOwnProp(input, '_locale')) {
-              ret._locale = input._locale;
-          }
 
-          return ret;
-      };
+/***/ },
+/* 60 */
+/***/ function(module, exports, __webpack_require__) {
 
-      // version number
-      moment.version = VERSION;
+  var Node = __webpack_require__(40);
 
-      // default format
-      moment.defaultFormat = isoFormat;
+  /**
+   * This function can be called from the _doInAllSectors function
+   *
+   * @param object
+   * @param overlappingNodes
+   * @private
+   */
+  exports._getNodesOverlappingWith = function(object, overlappingNodes) {
+    var nodes = this.nodes;
+    for (var nodeId in nodes) {
+      if (nodes.hasOwnProperty(nodeId)) {
+        if (nodes[nodeId].isOverlappingWith(object)) {
+          overlappingNodes.push(nodeId);
+        }
+      }
+    }
+  };
 
-      // constant that refers to the ISO standard
-      moment.ISO_8601 = function () {};
+  /**
+   * retrieve all nodes overlapping with given object
+   * @param {Object} object  An object with parameters left, top, right, bottom
+   * @return {Number[]}   An array with id's of the overlapping nodes
+   * @private
+   */
+  exports._getAllNodesOverlappingWith = function (object) {
+    var overlappingNodes = [];
+    this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes);
+    return overlappingNodes;
+  };
 
-      // Plugins that add properties should also add the key here (null value),
-      // so we can properly clone ourselves.
-      moment.momentProperties = momentProperties;
 
-      // This function will be called whenever a moment is mutated.
-      // It is intended to keep the offset in sync with the timezone.
-      moment.updateOffset = function () {};
+  /**
+   * Return a position object in canvasspace from a single point in screenspace
+   *
+   * @param pointer
+   * @returns {{left: number, top: number, right: number, bottom: number}}
+   * @private
+   */
+  exports._pointerToPositionObject = function(pointer) {
+    var x = this._XconvertDOMtoCanvas(pointer.x);
+    var y = this._YconvertDOMtoCanvas(pointer.y);
 
-      // This function allows you to set a threshold for relative time strings
-      moment.relativeTimeThreshold = function (threshold, limit) {
-          if (relativeTimeThresholds[threshold] === undefined) {
-              return false;
-          }
-          if (limit === undefined) {
-              return relativeTimeThresholds[threshold];
-          }
-          relativeTimeThresholds[threshold] = limit;
-          return true;
-      };
+    return {
+      left:   x,
+      top:    y,
+      right:  x,
+      bottom: y
+    };
+  };
 
-      moment.lang = deprecate(
-          'moment.lang is deprecated. Use moment.locale instead.',
-          function (key, value) {
-              return moment.locale(key, value);
-          }
-      );
 
-      // This function will load locale and then set the global locale.  If
-      // no arguments are passed in, it will simply return the current global
-      // locale key.
-      moment.locale = function (key, values) {
-          var data;
-          if (key) {
-              if (typeof(values) !== 'undefined') {
-                  data = moment.defineLocale(key, values);
-              }
-              else {
-                  data = moment.localeData(key);
-              }
+  /**
+   * Get the top node at the a specific point (like a click)
+   *
+   * @param {{x: Number, y: Number}} pointer
+   * @return {Node | null} node
+   * @private
+   */
+  exports._getNodeAt = function (pointer) {
+    // we first check if this is an navigation controls element
+    var positionObject = this._pointerToPositionObject(pointer);
+    var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
 
-              if (data) {
-                  moment.duration._locale = moment._locale = data;
-              }
-          }
+    // if there are overlapping nodes, select the last one, this is the
+    // one which is drawn on top of the others
+    if (overlappingNodes.length > 0) {
+       return this.nodes[overlappingNodes[overlappingNodes.length - 1]];
+    }
+    else {
+      return null;
+    }
+  };
 
-          return moment._locale._abbr;
-      };
 
-      moment.defineLocale = function (name, values) {
-          if (values !== null) {
-              values.abbr = name;
-              if (!locales[name]) {
-                  locales[name] = new Locale();
-              }
-              locales[name].set(values);
+  /**
+   * retrieve all edges overlapping with given object, selector is around center
+   * @param {Object} object  An object with parameters left, top, right, bottom
+   * @return {Number[]}   An array with id's of the overlapping nodes
+   * @private
+   */
+  exports._getEdgesOverlappingWith = function (object, overlappingEdges) {
+    var edges = this.edges;
+    for (var edgeId in edges) {
+      if (edges.hasOwnProperty(edgeId)) {
+        if (edges[edgeId].isOverlappingWith(object)) {
+          overlappingEdges.push(edgeId);
+        }
+      }
+    }
+  };
 
-              // backwards compat for now: also set the locale
-              moment.locale(name);
 
-              return locales[name];
-          } else {
-              // useful for testing
-              delete locales[name];
-              return null;
-          }
-      };
-
-      moment.langData = deprecate(
-          'moment.langData is deprecated. Use moment.localeData instead.',
-          function (key) {
-              return moment.localeData(key);
-          }
-      );
+  /**
+   * retrieve all nodes overlapping with given object
+   * @param {Object} object  An object with parameters left, top, right, bottom
+   * @return {Number[]}   An array with id's of the overlapping nodes
+   * @private
+   */
+  exports._getAllEdgesOverlappingWith = function (object) {
+    var overlappingEdges = [];
+    this._doInAllActiveSectors("_getEdgesOverlappingWith",object,overlappingEdges);
+    return overlappingEdges;
+  };
 
-      // returns locale data
-      moment.localeData = function (key) {
-          var locale;
+  /**
+   * Place holder. To implement change the _getNodeAt to a _getObjectAt. Have the _getObjectAt call
+   * _getNodeAt and _getEdgesAt, then priortize the selection to user preferences.
+   *
+   * @param pointer
+   * @returns {null}
+   * @private
+   */
+  exports._getEdgeAt = function(pointer) {
+    var positionObject = this._pointerToPositionObject(pointer);
+    var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
 
-          if (key && key._locale && key._locale._abbr) {
-              key = key._locale._abbr;
-          }
+    if (overlappingEdges.length > 0) {
+      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
+    }
+    else {
+      return null;
+    }
+  };
 
-          if (!key) {
-              return moment._locale;
-          }
 
-          if (!isArray(key)) {
-              //short-circuit everything else
-              locale = loadLocale(key);
-              if (locale) {
-                  return locale;
-              }
-              key = [key];
-          }
+  /**
+   * Add object to the selection array.
+   *
+   * @param obj
+   * @private
+   */
+  exports._addToSelection = function(obj) {
+    if (obj instanceof Node) {
+      this.selectionObj.nodes[obj.id] = obj;
+    }
+    else {
+      this.selectionObj.edges[obj.id] = obj;
+    }
+  };
 
-          return chooseLocale(key);
-      };
+  /**
+   * Add object to the selection array.
+   *
+   * @param obj
+   * @private
+   */
+  exports._addToHover = function(obj) {
+    if (obj instanceof Node) {
+      this.hoverObj.nodes[obj.id] = obj;
+    }
+    else {
+      this.hoverObj.edges[obj.id] = obj;
+    }
+  };
 
-      // compare moment object
-      moment.isMoment = function (obj) {
-          return obj instanceof Moment ||
-              (obj != null && hasOwnProp(obj, '_isAMomentObject'));
-      };
 
-      // for typechecking Duration objects
-      moment.isDuration = function (obj) {
-          return obj instanceof Duration;
-      };
+  /**
+   * Remove a single option from selection.
+   *
+   * @param {Object} obj
+   * @private
+   */
+  exports._removeFromSelection = function(obj) {
+    if (obj instanceof Node) {
+      delete this.selectionObj.nodes[obj.id];
+    }
+    else {
+      delete this.selectionObj.edges[obj.id];
+    }
+  };
 
-      for (i = lists.length - 1; i >= 0; --i) {
-          makeList(lists[i]);
+  /**
+   * Unselect all. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
+   */
+  exports._unselectAll = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        this.selectionObj.nodes[nodeId].unselect();
       }
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        this.selectionObj.edges[edgeId].unselect();
+      }
+    }
 
-      moment.normalizeUnits = function (units) {
-          return normalizeUnits(units);
-      };
-
-      moment.invalid = function (flags) {
-          var m = moment.utc(NaN);
-          if (flags != null) {
-              extend(m._pf, flags);
-          }
-          else {
-              m._pf.userInvalidated = true;
-          }
+    this.selectionObj = {nodes:{},edges:{}};
 
-          return m;
-      };
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-      moment.parseZone = function () {
-          return moment.apply(null, arguments).parseZone();
-      };
+  /**
+   * Unselect all clusters. The selectionObj is useful for this.
+   *
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
+   */
+  exports._unselectClusters = function(doNotTrigger) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
 
-      moment.parseTwoDigitYear = function (input) {
-          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
-      };
+    for (var nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
+          this.selectionObj.nodes[nodeId].unselect();
+          this._removeFromSelection(this.selectionObj.nodes[nodeId]);
+        }
+      }
+    }
 
-      moment.isDate = isDate;
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-      /************************************
-          Moment Prototype
-      ************************************/
 
+  /**
+   * return the number of selected nodes
+   *
+   * @returns {number}
+   * @private
+   */
+  exports._getSelectedNodeCount = function() {
+    var count = 0;
+    for (var nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        count += 1;
+      }
+    }
+    return count;
+  };
 
-      extend(moment.fn = Moment.prototype, {
+  /**
+   * return the selected node
+   *
+   * @returns {number}
+   * @private
+   */
+  exports._getSelectedNode = function() {
+    for (var nodeId in this.selectionObj.nodes) {
+      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        return this.selectionObj.nodes[nodeId];
+      }
+    }
+    return null;
+  };
 
-          clone : function () {
-              return moment(this);
-          },
+  /**
+   * return the selected edge
+   *
+   * @returns {number}
+   * @private
+   */
+  exports._getSelectedEdge = function() {
+    for (var edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        return this.selectionObj.edges[edgeId];
+      }
+    }
+    return null;
+  };
 
-          valueOf : function () {
-              return +this._d - ((this._offset || 0) * 60000);
-          },
 
-          unix : function () {
-              return Math.floor(+this / 1000);
-          },
+  /**
+   * return the number of selected edges
+   *
+   * @returns {number}
+   * @private
+   */
+  exports._getSelectedEdgeCount = function() {
+    var count = 0;
+    for (var edgeId in this.selectionObj.edges) {
+      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        count += 1;
+      }
+    }
+    return count;
+  };
 
-          toString : function () {
-              return this.clone().locale('en').format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ');
-          },
 
-          toDate : function () {
-              return this._offset ? new Date(+this) : this._d;
-          },
+  /**
+   * return the number of selected objects.
+   *
+   * @returns {number}
+   * @private
+   */
+  exports._getSelectedObjectCount = function() {
+    var count = 0;
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        count += 1;
+      }
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        count += 1;
+      }
+    }
+    return count;
+  };
 
-          toISOString : function () {
-              var m = moment(this).utc();
-              if (0 < m.year() && m.year() <= 9999) {
-                  if ('function' === typeof Date.prototype.toISOString) {
-                      // native implementation is ~50x faster, use it when we can
-                      return this.toDate().toISOString();
-                  } else {
-                      return formatMoment(m, 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
-                  }
-              } else {
-                  return formatMoment(m, 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
-              }
-          },
+  /**
+   * Check if anything is selected
+   *
+   * @returns {boolean}
+   * @private
+   */
+  exports._selectionIsEmpty = function() {
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        return false;
+      }
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        return false;
+      }
+    }
+    return true;
+  };
 
-          toArray : function () {
-              var m = this;
-              return [
-                  m.year(),
-                  m.month(),
-                  m.date(),
-                  m.hours(),
-                  m.minutes(),
-                  m.seconds(),
-                  m.milliseconds()
-              ];
-          },
 
-          isValid : function () {
-              return isValid(this);
-          },
+  /**
+   * check if one of the selected nodes is a cluster.
+   *
+   * @returns {boolean}
+   * @private
+   */
+  exports._clusterInSelection = function() {
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
 
-          isDSTShifted : function () {
-              if (this._a) {
-                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
-              }
+  /**
+   * select the edges connected to the node that is being selected
+   *
+   * @param {Node} node
+   * @private
+   */
+  exports._selectConnectedEdges = function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      var edge = node.dynamicEdges[i];
+      edge.select();
+      this._addToSelection(edge);
+    }
+  };
 
-              return false;
-          },
+  /**
+   * select the edges connected to the node that is being selected
+   *
+   * @param {Node} node
+   * @private
+   */
+  exports._hoverConnectedEdges = function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      var edge = node.dynamicEdges[i];
+      edge.hover = true;
+      this._addToHover(edge);
+    }
+  };
 
-          parsingFlags : function () {
-              return extend({}, this._pf);
-          },
 
-          invalidAt: function () {
-              return this._pf.overflow;
-          },
+  /**
+   * unselect the edges connected to the node that is being selected
+   *
+   * @param {Node} node
+   * @private
+   */
+  exports._unselectConnectedEdges = function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      var edge = node.dynamicEdges[i];
+      edge.unselect();
+      this._removeFromSelection(edge);
+    }
+  };
 
-          utc : function (keepLocalTime) {
-              return this.utcOffset(0, keepLocalTime);
-          },
 
-          local : function (keepLocalTime) {
-              if (this._isUTC) {
-                  this.utcOffset(0, keepLocalTime);
-                  this._isUTC = false;
 
-                  if (keepLocalTime) {
-                      this.subtract(this._dateUtcOffset(), 'm');
-                  }
-              }
-              return this;
-          },
 
-          format : function (inputString) {
-              var output = formatMoment(this, inputString || moment.defaultFormat);
-              return this.localeData().postformat(output);
-          },
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @param {Boolean} append
+   * @param {Boolean} [doNotTrigger] | ignore trigger
+   * @private
+   */
+  exports._selectObject = function(object, append, doNotTrigger, highlightEdges, overrideSelectable) {
+    if (doNotTrigger === undefined) {
+      doNotTrigger = false;
+    }
+    if (highlightEdges === undefined) {
+      highlightEdges = true;
+    }
 
-          add : createAdder(1, 'add'),
+    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
+      this._unselectAll(true);
+    }
 
-          subtract : createAdder(-1, 'subtract'),
+    // selectable allows the object to be selected. Override can be used if needed to bypass this.
+    if (object.selected == false && (this.constants.selectable == true || overrideSelectable)) {
+      object.select();
+      this._addToSelection(object);
+      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
+        this._selectConnectedEdges(object);
+      }
+    }
+    // do not select the object if selectable is false, only add it to selection to allow drag to work
+    else if (object.selected == false) {
+      this._addToSelection(object);
+      doNotTrigger = true;
+    }
+    else {
+      object.unselect();
+      this._removeFromSelection(object);
+    }
 
-          diff : function (input, units, asFloat) {
-              var that = makeAs(input, this),
-                  zoneDiff = (that.utcOffset() - this.utcOffset()) * 6e4,
-                  anchor, diff, output, daysAdjust;
+    if (doNotTrigger == false) {
+      this.emit('select', this.getSelection());
+    }
+  };
 
-              units = normalizeUnits(units);
 
-              if (units === 'year' || units === 'month' || units === 'quarter') {
-                  output = monthDiff(this, that);
-                  if (units === 'quarter') {
-                      output = output / 3;
-                  } else if (units === 'year') {
-                      output = output / 12;
-                  }
-              } else {
-                  diff = this - that;
-                  output = units === 'second' ? diff / 1e3 : // 1000
-                      units === 'minute' ? diff / 6e4 : // 1000 * 60
-                      units === 'hour' ? diff / 36e5 : // 1000 * 60 * 60
-                      units === 'day' ? (diff - zoneDiff) / 864e5 : // 1000 * 60 * 60 * 24, negate dst
-                      units === 'week' ? (diff - zoneDiff) / 6048e5 : // 1000 * 60 * 60 * 24 * 7, negate dst
-                      diff;
-              }
-              return asFloat ? output : absRound(output);
-          },
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @private
+   */
+  exports._blurObject = function(object) {
+    if (object.hover == true) {
+      object.hover = false;
+      this.emit("blurNode",{node:object.id});
+    }
+  };
 
-          from : function (time, withoutSuffix) {
-              return moment.duration({to: this, from: time}).locale(this.locale()).humanize(!withoutSuffix);
-          },
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @private
+   */
+  exports._hoverObject = function(object) {
+    if (object.hover == false) {
+      object.hover = true;
+      this._addToHover(object);
+      if (object instanceof Node) {
+        this.emit("hoverNode",{node:object.id});
+      }
+    }
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
+    }
+  };
 
-          fromNow : function (withoutSuffix) {
-              return this.from(moment(), withoutSuffix);
-          },
 
-          calendar : function (time) {
-              // We want to compare the start of today, vs this.
-              // Getting start-of-today depends on whether we're locat/utc/offset
-              // or not.
-              var now = time || moment(),
-                  sod = makeAs(now, this).startOf('day'),
-                  diff = this.diff(sod, 'days', true),
-                  format = diff < -6 ? 'sameElse' :
-                      diff < -1 ? 'lastWeek' :
-                      diff < 0 ? 'lastDay' :
-                      diff < 1 ? 'sameDay' :
-                      diff < 2 ? 'nextDay' :
-                      diff < 7 ? 'nextWeek' : 'sameElse';
-              return this.format(this.localeData().calendar(format, this, moment(now)));
-          },
-
-          isLeapYear : function () {
-              return isLeapYear(this.year());
-          },
-
-          isDST : function () {
-              return (this.utcOffset() > this.clone().month(0).utcOffset() ||
-                  this.utcOffset() > this.clone().month(5).utcOffset());
-          },
+  /**
+   * handles the selection part of the touch, only for navigation controls elements;
+   * Touch is triggered before tap, also before hold. Hold triggers after a while.
+   * This is the most responsive solution
+   *
+   * @param {Object} pointer
+   * @private
+   */
+  exports._handleTouch = function(pointer) {
+  };
 
-          day : function (input) {
-              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
-              if (input != null) {
-                  input = parseWeekday(input, this.localeData());
-                  return this.add(input - day, 'd');
-              } else {
-                  return day;
-              }
-          },
 
-          month : makeAccessor('Month', true),
+  /**
+   * handles the selection part of the tap;
+   *
+   * @param {Object} pointer
+   * @private
+   */
+  exports._handleTap = function(pointer) {
+    var node = this._getNodeAt(pointer);
+    if (node != null) {
+      this._selectObject(node, false);
+    }
+    else {
+      var edge = this._getEdgeAt(pointer);
+      if (edge != null) {
+        this._selectObject(edge, false);
+      }
+      else {
+        this._unselectAll();
+      }
+    }
+    var properties = this.getSelection();
+    properties['pointer'] = {
+      DOM: {x: pointer.x, y: pointer.y},
+      canvas: {x: this._XconvertDOMtoCanvas(pointer.x), y: this._YconvertDOMtoCanvas(pointer.y)}
+    }
+    this.emit("click", properties);
+    this._redraw();
+  };
 
-          startOf : function (units) {
-              units = normalizeUnits(units);
-              // the following switch intentionally omits break keywords
-              // to utilize falling through the cases.
-              switch (units) {
-              case 'year':
-                  this.month(0);
-                  /* falls through */
-              case 'quarter':
-              case 'month':
-                  this.date(1);
-                  /* falls through */
-              case 'week':
-              case 'isoWeek':
-              case 'day':
-                  this.hours(0);
-                  /* falls through */
-              case 'hour':
-                  this.minutes(0);
-                  /* falls through */
-              case 'minute':
-                  this.seconds(0);
-                  /* falls through */
-              case 'second':
-                  this.milliseconds(0);
-                  /* falls through */
-              }
 
-              // weeks are a special case
-              if (units === 'week') {
-                  this.weekday(0);
-              } else if (units === 'isoWeek') {
-                  this.isoWeekday(1);
-              }
+  /**
+   * handles the selection part of the double tap and opens a cluster if needed
+   *
+   * @param {Object} pointer
+   * @private
+   */
+  exports._handleDoubleTap = function(pointer) {
+    var node = this._getNodeAt(pointer);
+    if (node != null && node !== undefined) {
+      // we reset the areaCenter here so the opening of the node will occur
+      this.areaCenter =  {"x" : this._XconvertDOMtoCanvas(pointer.x),
+                          "y" : this._YconvertDOMtoCanvas(pointer.y)};
+      this.openCluster(node);
+    }
+    var properties = this.getSelection();
+    properties['pointer'] = {
+      DOM: {x: pointer.x, y: pointer.y},
+      canvas: {x: this._XconvertDOMtoCanvas(pointer.x), y: this._YconvertDOMtoCanvas(pointer.y)}
+    }
+    this.emit("doubleClick", properties);
+  };
 
-              // quarters are also special
-              if (units === 'quarter') {
-                  this.month(Math.floor(this.month() / 3) * 3);
-              }
 
-              return this;
-          },
+  /**
+   * Handle the onHold selection part
+   *
+   * @param pointer
+   * @private
+   */
+  exports._handleOnHold = function(pointer) {
+    var node = this._getNodeAt(pointer);
+    if (node != null) {
+      this._selectObject(node,true);
+    }
+    else {
+      var edge = this._getEdgeAt(pointer);
+      if (edge != null) {
+        this._selectObject(edge,true);
+      }
+    }
+    this._redraw();
+  };
 
-          endOf: function (units) {
-              units = normalizeUnits(units);
-              if (units === undefined || units === 'millisecond') {
-                  return this;
-              }
-              return this.startOf(units).add(1, (units === 'isoWeek' ? 'week' : units)).subtract(1, 'ms');
-          },
 
-          isAfter: function (input, units) {
-              var inputMs;
-              units = normalizeUnits(typeof units !== 'undefined' ? units : 'millisecond');
-              if (units === 'millisecond') {
-                  input = moment.isMoment(input) ? input : moment(input);
-                  return +this > +input;
-              } else {
-                  inputMs = moment.isMoment(input) ? +input : +moment(input);
-                  return inputMs < +this.clone().startOf(units);
-              }
-          },
+  /**
+   * handle the onRelease event. These functions are here for the navigation controls module
+   * and data manipulation module.
+   *
+    * @private
+   */
+  exports._handleOnRelease = function(pointer) {
+    this._manipulationReleaseOverload(pointer);
+    this._navigationReleaseOverload(pointer);
+  };
 
-          isBefore: function (input, units) {
-              var inputMs;
-              units = normalizeUnits(typeof units !== 'undefined' ? units : 'millisecond');
-              if (units === 'millisecond') {
-                  input = moment.isMoment(input) ? input : moment(input);
-                  return +this < +input;
-              } else {
-                  inputMs = moment.isMoment(input) ? +input : +moment(input);
-                  return +this.clone().endOf(units) < inputMs;
-              }
-          },
+  exports._manipulationReleaseOverload = function (pointer) {};
+  exports._navigationReleaseOverload = function (pointer) {};
 
-          isBetween: function (from, to, units) {
-              return this.isAfter(from, units) && this.isBefore(to, units);
-          },
+  /**
+   *
+   * retrieve the currently selected objects
+   * @return {{nodes: Array.<String>, edges: Array.<String>}} selection
+   */
+  exports.getSelection = function() {
+    var nodeIds = this.getSelectedNodes();
+    var edgeIds = this.getSelectedEdges();
+    return {nodes:nodeIds, edges:edgeIds};
+  };
 
-          isSame: function (input, units) {
-              var inputMs;
-              units = normalizeUnits(units || 'millisecond');
-              if (units === 'millisecond') {
-                  input = moment.isMoment(input) ? input : moment(input);
-                  return +this === +input;
-              } else {
-                  inputMs = +moment(input);
-                  return +(this.clone().startOf(units)) <= inputMs && inputMs <= +(this.clone().endOf(units));
-              }
-          },
+  /**
+   *
+   * retrieve the currently selected nodes
+   * @return {String[]} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedNodes = function() {
+    var idArray = [];
+    if (this.constants.selectable == true) {
+      for (var nodeId in this.selectionObj.nodes) {
+        if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+          idArray.push(nodeId);
+        }
+      }
+    }
+    return idArray
+  };
 
-          min: deprecate(
-                   'moment().min is deprecated, use moment.min instead. https://github.com/moment/moment/issues/1548',
-                   function (other) {
-                       other = moment.apply(null, arguments);
-                       return other < this ? this : other;
-                   }
-           ),
+  /**
+   *
+   * retrieve the currently selected edges
+   * @return {Array} selection    An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.getSelectedEdges = function() {
+    var idArray = [];
+    if (this.constants.selectable == true) {
+      for (var edgeId in this.selectionObj.edges) {
+        if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+          idArray.push(edgeId);
+        }
+      }
+    }
+    return idArray;
+  };
 
-          max: deprecate(
-                  'moment().max is deprecated, use moment.max instead. https://github.com/moment/moment/issues/1548',
-                  function (other) {
-                      other = moment.apply(null, arguments);
-                      return other > this ? this : other;
-                  }
-          ),
 
-          zone : deprecate(
-                  'moment().zone is deprecated, use moment().utcOffset instead. ' +
-                  'https://github.com/moment/moment/issues/1779',
-                  function (input, keepLocalTime) {
-                      if (input != null) {
-                          if (typeof input !== 'string') {
-                              input = -input;
-                          }
+  /**
+   * select zero or more nodes DEPRICATED
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.setSelection = function() {
+    console.log("setSelection is deprecated. Please use selectNodes instead.")
+  };
 
-                          this.utcOffset(input, keepLocalTime);
 
-                          return this;
-                      } else {
-                          return -this.utcOffset();
-                      }
-                  }
-          ),
+  /**
+   * select zero or more nodes with the option to highlight edges
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   * @param {boolean} [highlightEdges]
+   */
+  exports.selectNodes = function(selection, highlightEdges) {
+    var i, iMax, id;
 
-          // keepLocalTime = true means only change the timezone, without
-          // affecting the local hour. So 5:31:26 +0300 --[utcOffset(2, true)]-->
-          // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist with offset
-          // +0200, so we adjust the time as needed, to be valid.
-          //
-          // Keeping the time actually adds/subtracts (one hour)
-          // from the actual represented time. That is why we call updateOffset
-          // a second time. In case it wants us to change the offset again
-          // _changeInProgress == true case, then we have to adjust, because
-          // there is no such time in the given timezone.
-          utcOffset : function (input, keepLocalTime) {
-              var offset = this._offset || 0,
-                  localAdjust;
-              if (input != null) {
-                  if (typeof input === 'string') {
-                      input = utcOffsetFromString(input);
-                  }
-                  if (Math.abs(input) < 16) {
-                      input = input * 60;
-                  }
-                  if (!this._isUTC && keepLocalTime) {
-                      localAdjust = this._dateUtcOffset();
-                  }
-                  this._offset = input;
-                  this._isUTC = true;
-                  if (localAdjust != null) {
-                      this.add(localAdjust, 'm');
-                  }
-                  if (offset !== input) {
-                      if (!keepLocalTime || this._changeInProgress) {
-                          addOrSubtractDurationFromMoment(this,
-                                  moment.duration(input - offset, 'm'), 1, false);
-                      } else if (!this._changeInProgress) {
-                          this._changeInProgress = true;
-                          moment.updateOffset(this, true);
-                          this._changeInProgress = null;
-                      }
-                  }
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-                  return this;
-              } else {
-                  return this._isUTC ? offset : this._dateUtcOffset();
-              }
-          },
+    // first unselect any selected node
+    this._unselectAll(true);
 
-          isLocal : function () {
-              return !this._isUTC;
-          },
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-          isUtcOffset : function () {
-              return this._isUTC;
-          },
+      var node = this.nodes[id];
+      if (!node) {
+        throw new RangeError('Node with id "' + id + '" not found');
+      }
+      this._selectObject(node,true,true,highlightEdges,true);
+    }
+    this.redraw();
+  };
 
-          isUtc : function () {
-              return this._isUTC && this._offset === 0;
-          },
 
-          zoneAbbr : function () {
-              return this._isUTC ? 'UTC' : '';
-          },
+  /**
+   * select zero or more edges
+   * @param {Number[] | String[]} selection     An array with the ids of the
+   *                                            selected nodes.
+   */
+  exports.selectEdges = function(selection) {
+    var i, iMax, id;
 
-          zoneName : function () {
-              return this._isUTC ? 'Coordinated Universal Time' : '';
-          },
+    if (!selection || (selection.length == undefined))
+      throw 'Selection must be an array with ids';
 
-          parseZone : function () {
-              if (this._tzm) {
-                  this.utcOffset(this._tzm);
-              } else if (typeof this._i === 'string') {
-                  this.utcOffset(utcOffsetFromString(this._i));
-              }
-              return this;
-          },
+    // first unselect any selected node
+    this._unselectAll(true);
 
-          hasAlignedHourOffset : function (input) {
-              if (!input) {
-                  input = 0;
-              }
-              else {
-                  input = moment(input).utcOffset();
-              }
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+      id = selection[i];
 
-              return (this.utcOffset() - input) % 60 === 0;
-          },
+      var edge = this.edges[id];
+      if (!edge) {
+        throw new RangeError('Edge with id "' + id + '" not found');
+      }
+      this._selectObject(edge,true,true,false,true);
+    }
+    this.redraw();
+  };
 
-          daysInMonth : function () {
-              return daysInMonth(this.year(), this.month());
-          },
+  /**
+   * Validate the selection: remove ids of nodes which no longer exist
+   * @private
+   */
+  exports._updateSelection = function () {
+    for(var nodeId in this.selectionObj.nodes) {
+      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+        if (!this.nodes.hasOwnProperty(nodeId)) {
+          delete this.selectionObj.nodes[nodeId];
+        }
+      }
+    }
+    for(var edgeId in this.selectionObj.edges) {
+      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+        if (!this.edges.hasOwnProperty(edgeId)) {
+          delete this.selectionObj.edges[edgeId];
+        }
+      }
+    }
+  };
 
-          dayOfYear : function (input) {
-              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
-              return input == null ? dayOfYear : this.add((input - dayOfYear), 'd');
-          },
 
-          quarter : function (input) {
-              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
-          },
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
 
-          weekYear : function (input) {
-              var year = weekOfYear(this, this.localeData()._week.dow, this.localeData()._week.doy).year;
-              return input == null ? year : this.add((input - year), 'y');
-          },
+  var util = __webpack_require__(1);
+  var Node = __webpack_require__(40);
+  var Edge = __webpack_require__(37);
 
-          isoWeekYear : function (input) {
-              var year = weekOfYear(this, 1, 4).year;
-              return input == null ? year : this.add((input - year), 'y');
-          },
+  /**
+   * clears the toolbar div element of children
+   *
+   * @private
+   */
+  exports._clearManipulatorBar = function() {
+    this._recursiveDOMDelete(this.manipulationDiv);
+    this.manipulationDOM = {};
 
-          week : function (input) {
-              var week = this.localeData().week(this);
-              return input == null ? week : this.add((input - week) * 7, 'd');
-          },
+    this._manipulationReleaseOverload = function () {};
+    delete this.sectors['support']['nodes']['targetNode'];
+    delete this.sectors['support']['nodes']['targetViaNode'];
+    this.controlNodesActive = false;
+    this.freezeSimulation = false;
+  };
 
-          isoWeek : function (input) {
-              var week = weekOfYear(this, 1, 4).week;
-              return input == null ? week : this.add((input - week) * 7, 'd');
-          },
+  /**
+   * Manipulation UI temporarily overloads certain functions to extend or replace them. To be able to restore
+   * these functions to their original functionality, we saved them in this.cachedFunctions.
+   * This function restores these functions to their original function.
+   *
+   * @private
+   */
+  exports._restoreOverloadedFunctions = function() {
+    for (var functionName in this.cachedFunctions) {
+      if (this.cachedFunctions.hasOwnProperty(functionName)) {
+        this[functionName] = this.cachedFunctions[functionName];
+        delete this.cachedFunctions[functionName];
+      }
+    }
+  };
 
-          weekday : function (input) {
-              var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7;
-              return input == null ? weekday : this.add(input - weekday, 'd');
-          },
+  /**
+   * Enable or disable edit-mode.
+   *
+   * @private
+   */
+  exports._toggleEditMode = function() {
+    this.editMode = !this.editMode;
+    var toolbar = this.manipulationDiv;
+    var closeDiv = this.closeDiv;
+    var editModeDiv = this.editModeDiv;
+    if (this.editMode == true) {
+      toolbar.style.display="block";
+      closeDiv.style.display="block";
+      editModeDiv.style.display="none";
+      closeDiv.onclick = this._toggleEditMode.bind(this);
+    }
+    else {
+      toolbar.style.display="none";
+      closeDiv.style.display="none";
+      editModeDiv.style.display="block";
+      closeDiv.onclick = null;
+    }
+    this._createManipulatorBar()
+  };
 
-          isoWeekday : function (input) {
-              // behaves the same as moment#day except
-              // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6)
-              // as a setter, sunday should belong to the previous week.
-              return input == null ? this.day() || 7 : this.day(this.day() % 7 ? input : input - 7);
-          },
+  /**
+   * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
+   *
+   * @private
+   */
+  exports._createManipulatorBar = function() {
+    // remove bound functions
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-          isoWeeksInYear : function () {
-              return weeksInYear(this.year(), 1, 4);
-          },
+    var locale = this.constants.locales[this.constants.locale];
 
-          weeksInYear : function () {
-              var weekInfo = this.localeData()._week;
-              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
-          },
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+      this.controlNodesActive = false;
+      this._redraw();
+    }
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units]();
-          },
+    // restore overloaded functions
+    this._restoreOverloadedFunctions();
 
-          set : function (units, value) {
-              var unit;
-              if (typeof units === 'object') {
-                  for (unit in units) {
-                      this.set(unit, units[unit]);
-                  }
-              }
-              else {
-                  units = normalizeUnits(units);
-                  if (typeof this[units] === 'function') {
-                      this[units](value);
-                  }
-              }
-              return this;
-          },
+    // resume calculation
+    this.freezeSimulation = false;
 
-          // If passed a locale key, it will set the locale for this
-          // instance.  Otherwise, it will return the locale configuration
-          // variables for this instance.
-          locale : function (key) {
-              var newLocaleData;
+    // reset global variables
+    this.blockConnectingEdgeSelection = false;
+    this.forceAppendSelection = false;
+    this.manipulationDOM = {};
 
-              if (key === undefined) {
-                  return this._locale._abbr;
-              } else {
-                  newLocaleData = moment.localeData(key);
-                  if (newLocaleData != null) {
-                      this._locale = newLocaleData;
-                  }
-                  return this;
-              }
-          },
+    if (this.editMode == true) {
+      while (this.manipulationDiv.hasChildNodes()) {
+        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
+      }
 
-          lang : deprecate(
-              'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.',
-              function (key) {
-                  if (key === undefined) {
-                      return this.localeData();
-                  } else {
-                      return this.locale(key);
-                  }
-              }
-          ),
+      this.manipulationDOM['addNodeSpan'] = document.createElement('span');
+      this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
+      this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
+      this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
 
-          localeData : function () {
-              return this._locale;
-          },
+      this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+      this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-          _dateUtcOffset : function () {
-              // On Firefox.24 Date#getTimezoneOffset returns a floating point.
-              // https://github.com/moment/moment/pull/1871
-              return -Math.round(this._d.getTimezoneOffset() / 15) * 15;
-          }
+      this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
+      this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
+      this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
+      this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
 
-      });
+      this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+      this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
 
-      function rawMonthSetter(mom, value) {
-          var dayOfMonth;
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
+        this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
 
-          // TODO: Move this out of here!
-          if (typeof value === 'string') {
-              value = mom.localeData().monthsParse(value);
-              // TODO: Another silent failure?
-              if (typeof value !== 'number') {
-                  return mom;
-              }
-          }
+        this.manipulationDOM['editNodeSpan'] = document.createElement('span');
+        this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
+        this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
+        this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
+        this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
+        this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
 
-          dayOfMonth = Math.min(mom.date(),
-                  daysInMonth(mom.year(), value));
-          mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
-          return mom;
+        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
+        this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
       }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
+        this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
 
-      function rawGetter(mom, unit) {
-          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
-      }
+        this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
+        this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
+        this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
+        this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
+        this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
+        this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
 
-      function rawSetter(mom, unit, value) {
-          if (unit === 'Month') {
-              return rawMonthSetter(mom, value);
-          } else {
-              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
-          }
+        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
+        this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
       }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
+        this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
 
-      function makeAccessor(unit, keepTime) {
-          return function (value) {
-              if (value != null) {
-                  rawSetter(this, unit, value);
-                  moment.updateOffset(this, keepTime);
-                  return this;
-              } else {
-                  return rawGetter(this, unit);
-              }
-          };
-      }
+        this.manipulationDOM['deleteSpan'] = document.createElement('span');
+        this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
+        this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
+        this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
+        this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
+        this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
 
-      moment.fn.millisecond = moment.fn.milliseconds = makeAccessor('Milliseconds', false);
-      moment.fn.second = moment.fn.seconds = makeAccessor('Seconds', false);
-      moment.fn.minute = moment.fn.minutes = makeAccessor('Minutes', false);
-      // Setting the hour should keep the time, because the user explicitly
-      // specified which hour he wants. So trying to maintain the same hour (in
-      // a new timezone) makes sense. Adding/subtracting hours does not follow
-      // this rule.
-      moment.fn.hour = moment.fn.hours = makeAccessor('Hours', true);
-      // moment.fn.month is defined separately
-      moment.fn.date = makeAccessor('Date', true);
-      moment.fn.dates = deprecate('dates accessor is deprecated. Use date instead.', makeAccessor('Date', true));
-      moment.fn.year = makeAccessor('FullYear', true);
-      moment.fn.years = deprecate('years accessor is deprecated. Use year instead.', makeAccessor('FullYear', true));
+        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
+        this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
+      }
 
-      // add plural methods
-      moment.fn.days = moment.fn.day;
-      moment.fn.months = moment.fn.month;
-      moment.fn.weeks = moment.fn.week;
-      moment.fn.isoWeeks = moment.fn.isoWeek;
-      moment.fn.quarters = moment.fn.quarter;
 
-      // add aliased format methods
-      moment.fn.toJSON = moment.fn.toISOString;
+      // bind the icons
+      this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
+      this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
+      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
+        this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
+      }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
+      }
+      if (this._selectionIsEmpty() == false) {
+        this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
+      }
+      this.closeDiv.onclick = this._toggleEditMode.bind(this);
 
-      // alias isUtc for dev-friendliness
-      moment.fn.isUTC = moment.fn.isUtc;
+      var me = this;
+      this.boundFunction = me._createManipulatorBar;
+      this.on('select', this.boundFunction);
+    }
+    else {
+      while (this.editModeDiv.hasChildNodes()) {
+        this.editModeDiv.removeChild(this.editModeDiv.firstChild);
+      }
 
-      /************************************
-          Duration Prototype
-      ************************************/
+      this.manipulationDOM['editModeSpan'] = document.createElement('span');
+      this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
+      this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
+      this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
+      this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
+      this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
 
+      this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
 
-      function daysToYears (days) {
-          // 400 years have 146097 days (taking into account leap year rules)
-          return days * 400 / 146097;
-      }
+      this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
+    }
+  };
 
-      function yearsToDays (years) {
-          // years * 365 + absRound(years / 4) -
-          //     absRound(years / 100) + absRound(years / 400);
-          return years * 146097 / 400;
-      }
 
-      extend(moment.duration.fn = Duration.prototype, {
 
-          _bubble : function () {
-              var milliseconds = this._milliseconds,
-                  days = this._days,
-                  months = this._months,
-                  data = this._data,
-                  seconds, minutes, hours, years = 0;
+  /**
+   * Create the toolbar for adding Nodes
+   *
+   * @private
+   */
+  exports._createAddNodeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-              // The following code bubbles up values, see the tests for
-              // examples of what that means.
-              data.milliseconds = milliseconds % 1000;
+    var locale = this.constants.locales[this.constants.locale];
 
-              seconds = absRound(milliseconds / 1000);
-              data.seconds = seconds % 60;
+    this.manipulationDOM = {};
+    this.manipulationDOM['backSpan'] = document.createElement('span');
+    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
 
-              minutes = absRound(seconds / 60);
-              data.minutes = minutes % 60;
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-              hours = absRound(minutes / 60);
-              data.hours = hours % 24;
+    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
+    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
 
-              days += absRound(hours / 24);
+    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
-              // Accurately convert days to years, assume start from year 0.
-              years = absRound(daysToYears(days));
-              days -= absRound(yearsToDays(years));
+    // bind the icon
+    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
-              // 30 days to a month
-              // TODO (iskren): Use anchor date (like 1st Jan) to compute this.
-              months += absRound(days / 30);
-              days %= 30;
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    var me = this;
+    this.boundFunction = me._addNode;
+    this.on('select', this.boundFunction);
+  };
 
-              // 12 months -> 1 year
-              years += absRound(months / 12);
-              months %= 12;
 
-              data.days = days;
-              data.months = months;
-              data.years = years;
-          },
+  /**
+   * create the toolbar to connect nodes
+   *
+   * @private
+   */
+  exports._createAddEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this._unselectAll(true);
+    this.freezeSimulation = true;
 
-          abs : function () {
-              this._milliseconds = Math.abs(this._milliseconds);
-              this._days = Math.abs(this._days);
-              this._months = Math.abs(this._months);
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-              this._data.milliseconds = Math.abs(this._data.milliseconds);
-              this._data.seconds = Math.abs(this._data.seconds);
-              this._data.minutes = Math.abs(this._data.minutes);
-              this._data.hours = Math.abs(this._data.hours);
-              this._data.months = Math.abs(this._data.months);
-              this._data.years = Math.abs(this._data.years);
+    var locale = this.constants.locales[this.constants.locale];
 
-              return this;
-          },
+    this._unselectAll();
+    this.forceAppendSelection = false;
+    this.blockConnectingEdgeSelection = true;
 
-          weeks : function () {
-              return absRound(this.days() / 7);
-          },
+    this.manipulationDOM = {};
+    this.manipulationDOM['backSpan'] = document.createElement('span');
+    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
 
-          valueOf : function () {
-              return this._milliseconds +
-                this._days * 864e5 +
-                (this._months % 12) * 2592e6 +
-                toInt(this._months / 12) * 31536e6;
-          },
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-          humanize : function (withSuffix) {
-              var output = relativeTime(this, !withSuffix, this.localeData());
+    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
+    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
 
-              if (withSuffix) {
-                  output = this.localeData().pastFuture(+this, output);
-              }
+    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
-              return this.localeData().postformat(output);
-          },
+    // bind the icon
+    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
-          add : function (input, val) {
-              // supports only 2.0-style add(1, 's') or add(moment)
-              var dur = moment.duration(input, val);
+    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
+    var me = this;
+    this.boundFunction = me._handleConnect;
+    this.on('select', this.boundFunction);
 
-              this._milliseconds += dur._milliseconds;
-              this._days += dur._days;
-              this._months += dur._months;
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"] = this._handleTouch;
+    this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
+    this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
+    this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
+    this.cachedFunctions["_handleOnHold"] = this._handleOnHold;
+    this._handleTouch = this._handleConnect;
+    this._manipulationReleaseOverload = function () {};
+    this._handleOnHold    = function () {};
+    this._handleDragStart = function () {};
+    this._handleDragEnd   = this._finishConnect;
 
-              this._bubble();
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-              return this;
-          },
+  /**
+   * create the toolbar to edit edges
+   *
+   * @private
+   */
+  exports._createEditEdgeToolbar = function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+    this.controlNodesActive = true;
 
-          subtract : function (input, val) {
-              var dur = moment.duration(input, val);
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
 
-              this._milliseconds -= dur._milliseconds;
-              this._days -= dur._days;
-              this._months -= dur._months;
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
 
-              this._bubble();
+    var locale = this.constants.locales[this.constants.locale];
 
-              return this;
-          },
+    this.manipulationDOM = {};
+    this.manipulationDOM['backSpan'] = document.createElement('span');
+    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
+    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
+    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
 
-          get : function (units) {
-              units = normalizeUnits(units);
-              return this[units.toLowerCase() + 's']();
-          },
+    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
+    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
 
-          as : function (units) {
-              var days, months;
-              units = normalizeUnits(units);
+    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
+    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
+    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
+    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
+    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
 
-              if (units === 'month' || units === 'year') {
-                  days = this._days + this._milliseconds / 864e5;
-                  months = this._months + daysToYears(days) * 12;
-                  return units === 'month' ? months : months / 12;
-              } else {
-                  // handle milliseconds separately because of floating point math errors (issue #1867)
-                  days = this._days + Math.round(yearsToDays(this._months / 12));
-                  switch (units) {
-                      case 'week': return days / 7 + this._milliseconds / 6048e5;
-                      case 'day': return days + this._milliseconds / 864e5;
-                      case 'hour': return days * 24 + this._milliseconds / 36e5;
-                      case 'minute': return days * 24 * 60 + this._milliseconds / 6e4;
-                      case 'second': return days * 24 * 60 * 60 + this._milliseconds / 1000;
-                      // Math.floor prevents floating point math errors here
-                      case 'millisecond': return Math.floor(days * 24 * 60 * 60 * 1000) + this._milliseconds;
-                      default: throw new Error('Unknown unit ' + units);
-                  }
-              }
-          },
+    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
+    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
 
-          lang : moment.fn.lang,
-          locale : moment.fn.locale,
+    // bind the icon
+    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
 
-          toIsoString : deprecate(
-              'toIsoString() is deprecated. Please use toISOString() instead ' +
-              '(notice the capitals)',
-              function () {
-                  return this.toISOString();
-              }
-          ),
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_manipulationReleaseOverload"]  = this._manipulationReleaseOverload;
+    this.cachedFunctions["_handleTap"]        = this._handleTap;
+    this.cachedFunctions["_handleDragStart"]  = this._handleDragStart;
+    this.cachedFunctions["_handleOnDrag"]     = this._handleOnDrag;
+    this._handleTouch     = this._selectControlNode;
+    this._handleTap       = function () {};
+    this._handleOnDrag    = this._controlNodeDrag;
+    this._handleDragStart = function () {}
+    this._manipulationReleaseOverload = this._releaseControlNode;
 
-          toISOString : function () {
-              // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
-              var years = Math.abs(this.years()),
-                  months = Math.abs(this.months()),
-                  days = Math.abs(this.days()),
-                  hours = Math.abs(this.hours()),
-                  minutes = Math.abs(this.minutes()),
-                  seconds = Math.abs(this.seconds() + this.milliseconds() / 1000);
+    // redraw to show the unselect
+    this._redraw();
+  };
 
-              if (!this.asSeconds()) {
-                  // this is the same as C#'s (Noda) and python (isodate)...
-                  // but not other JS (goog.date)
-                  return 'P0D';
-              }
 
-              return (this.asSeconds() < 0 ? '-' : '') +
-                  'P' +
-                  (years ? years + 'Y' : '') +
-                  (months ? months + 'M' : '') +
-                  (days ? days + 'D' : '') +
-                  ((hours || minutes || seconds) ? 'T' : '') +
-                  (hours ? hours + 'H' : '') +
-                  (minutes ? minutes + 'M' : '') +
-                  (seconds ? seconds + 'S' : '');
-          },
+  /**
+   * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
+   * to walk the user through the process.
+   *
+   * @private
+   */
+  exports._selectControlNode = function(pointer) {
+    this.edgeBeingEdited.controlNodes.from.unselect();
+    this.edgeBeingEdited.controlNodes.to.unselect();
+    this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
+    if (this.selectedControlNode !== null) {
+      this.selectedControlNode.select();
+      this.freezeSimulation = true;
+    }
+    this._redraw();
+  };
 
-          localeData : function () {
-              return this._locale;
-          },
 
-          toJSON : function () {
-              return this.toISOString();
-          }
-      });
+  /**
+   * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
+   * to walk the user through the process.
+   *
+   * @private
+   */
+  exports._controlNodeDrag = function(event) {
+    var pointer = this._getPointer(event.gesture.center);
+    if (this.selectedControlNode !== null && this.selectedControlNode !== undefined) {
+      this.selectedControlNode.x = this._XconvertDOMtoCanvas(pointer.x);
+      this.selectedControlNode.y = this._YconvertDOMtoCanvas(pointer.y);
+    }
+    this._redraw();
+  };
 
-      moment.duration.fn.toString = moment.duration.fn.toISOString;
 
-      function makeDurationGetter(name) {
-          moment.duration.fn[name] = function () {
-              return this._data[name];
-          };
+  /**
+   *
+   * @param pointer
+   * @private
+   */
+  exports._releaseControlNode = function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode !== null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this.edgeBeingEdited._restoreControlNodes();
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
       }
-
-      for (i in unitMillisecondFactors) {
-          if (hasOwnProp(unitMillisecondFactors, i)) {
-              makeDurationGetter(i.toLowerCase());
-          }
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this.edgeBeingEdited._restoreControlNodes();
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
       }
+    }
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
+    }
+    this.freezeSimulation = false;
+    this._redraw();
+  };
 
-      moment.duration.fn.asMilliseconds = function () {
-          return this.as('ms');
-      };
-      moment.duration.fn.asSeconds = function () {
-          return this.as('s');
-      };
-      moment.duration.fn.asMinutes = function () {
-          return this.as('m');
-      };
-      moment.duration.fn.asHours = function () {
-          return this.as('h');
-      };
-      moment.duration.fn.asDays = function () {
-          return this.as('d');
-      };
-      moment.duration.fn.asWeeks = function () {
-          return this.as('weeks');
-      };
-      moment.duration.fn.asMonths = function () {
-          return this.as('M');
-      };
-      moment.duration.fn.asYears = function () {
-          return this.as('y');
-      };
-
-      /************************************
-          Default Locale
-      ************************************/
+  /**
+   * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
+   * to walk the user through the process.
+   *
+   * @private
+   */
+  exports._handleConnect = function(pointer) {
+    if (this._getSelectedNodeCount() == 0) {
+      var node = this._getNodeAt(pointer);
 
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert(this.constants.locales[this.constants.locale]['createEdgeError'])
+        }
+        else {
+          this._selectObject(node,false);
+          var supportNodes = this.sectors['support']['nodes'];
 
-      // Set default locale, other locale will inherit from English.
-      moment.locale('en', {
-          ordinalParse: /\d{1,2}(th|st|nd|rd)/,
-          ordinal : function (number) {
-              var b = number % 10,
-                  output = (toInt(number % 100 / 10) === 1) ? 'th' :
-                  (b === 1) ? 'st' :
-                  (b === 2) ? 'nd' :
-                  (b === 3) ? 'rd' : 'th';
-              return number + output;
-          }
-      });
+          // create a node the temporary line can look at
+          supportNodes['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          var targetNode = supportNodes['targetNode'];
+          targetNode.x = node.x;
+          targetNode.y = node.y;
 
-      /* EMBED_LOCALES */
+          // create a temporary edge
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
+          var connectionEdge = this.edges['connectionEdge'];
+          connectionEdge.from = node;
+          connectionEdge.connected = true;
+          connectionEdge.options.smoothCurves = {enabled: true,
+              dynamic: false,
+              type: "continuous",
+              roundness: 0.5
+          };
+          connectionEdge.selected = true;
+          connectionEdge.to = targetNode;
 
-      /************************************
-          Exposing Moment
-      ************************************/
+          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
+          this._handleOnDrag = function(event) {
+            var pointer = this._getPointer(event.gesture.center);
+            var connectionEdge = this.edges['connectionEdge'];
+            connectionEdge.to.x = this._XconvertDOMtoCanvas(pointer.x);
+            connectionEdge.to.y = this._YconvertDOMtoCanvas(pointer.y);
+          };
 
-      function makeGlobal(shouldDeprecate) {
-          /*global ender:false */
-          if (typeof ender !== 'undefined') {
-              return;
-          }
-          oldGlobalMoment = globalScope.moment;
-          if (shouldDeprecate) {
-              globalScope.moment = deprecate(
-                      'Accessing Moment through the global scope is ' +
-                      'deprecated, and will be removed in an upcoming ' +
-                      'release.',
-                      moment);
-          } else {
-              globalScope.moment = moment;
-          }
+          this.moving = true;
+          this.start();
+        }
       }
+    }
+  };
 
-      // CommonJS module is defined
-      if (hasModule) {
-          module.exports = moment;
-      } else if (true) {
-          !(__WEBPACK_AMD_DEFINE_RESULT__ = function (require, exports, module) {
-              if (module.config && module.config() && module.config().noGlobal === true) {
-                  // release the global variable
-                  globalScope.moment = oldGlobalMoment;
-              }
+  exports._finishConnect = function(event) {
+    if (this._getSelectedNodeCount() == 1) {
+      var pointer = this._getPointer(event.gesture.center);
+      // restore the drag function
+      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
+      delete this.cachedFunctions["_handleOnDrag"];
 
-              return moment;
-          }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-          makeGlobal(true);
-      } else {
-          makeGlobal();
-      }
-  }).call(this);
-  
-  /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(71)(module)))
+      // remember the edge id
+      var connectFromId = this.edges['connectionEdge'].fromId;
 
-/***/ },
-/* 59 */
-/***/ function(module, exports, __webpack_require__) {
+      // remove the temporary nodes and edge
+      delete this.edges['connectionEdge'];
+      delete this.sectors['support']['nodes']['targetNode'];
+      delete this.sectors['support']['nodes']['targetViaNode'];
 
-  var __WEBPACK_AMD_DEFINE_RESULT__;/*! Hammer.JS - v1.1.3 - 2014-05-20
-   * http://eightmedia.github.io/hammer.js
-   *
-   * Copyright (c) 2014 Jorik Tangelder <j.tangelder@gmail.com>;
-   * Licensed under the MIT license */
+      var node = this._getNodeAt(pointer);
+      if (node != null) {
+        if (node.clusterSize > 1) {
+          alert(this.constants.locales[this.constants.locale]["createEdgeError"])
+        }
+        else {
+          this._createEdge(connectFromId,node.id);
+          this._createManipulatorBar();
+        }
+      }
+      this._unselectAll();
+    }
+  };
 
-  (function(window, undefined) {
-    'use strict';
 
   /**
-   * @main
-   * @module hammer
-   *
-   * @class Hammer
-   * @static
+   * Adds a node on the specified location
    */
+  exports._addNode = function() {
+    if (this._selectionIsEmpty() && this.editMode == true) {
+      var positionObject = this._pointerToPositionObject(this.pointerPosition);
+      var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMoveX:true,allowedToMoveY:true};
+      if (this.triggerFunctions.add) {
+        if (this.triggerFunctions.add.length == 2) {
+          var me = this;
+          this.triggerFunctions.add(defaultData, function(finalizedData) {
+            me.nodesData.add(finalizedData);
+            me._createManipulatorBar();
+            me.moving = true;
+            me.start();
+          });
+        }
+        else {
+          throw new Error('The function for add does not support two arguments (data,callback)');
+          this._createManipulatorBar();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.nodesData.add(defaultData);
+        this._createManipulatorBar();
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
+
 
   /**
-   * Hammer, use this to create instances
-   * ````
-   * var hammertime = new Hammer(myElement);
-   * ````
+   * connect two nodes with a new edge.
    *
-   * @method Hammer
-   * @param {HTMLElement} element
-   * @param {Object} [options={}]
-   * @return {Hammer.Instance}
+   * @private
    */
-  var Hammer = function Hammer(element, options) {
-      return new Hammer.Instance(element, options || {});
+  exports._createEdge = function(sourceNodeId,targetNodeId) {
+    if (this.editMode == true) {
+      var defaultData = {from:sourceNodeId, to:targetNodeId};
+      if (this.triggerFunctions.connect) {
+        if (this.triggerFunctions.connect.length == 2) {
+          var me = this;
+          this.triggerFunctions.connect(defaultData, function(finalizedData) {
+            me.edgesData.add(finalizedData);
+            me.moving = true;
+            me.start();
+          });
+        }
+        else {
+          throw new Error('The function for connect does not support two arguments (data,callback)');
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.add(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
   };
 
   /**
-   * version, as defined in package.json
-   * the value will be set at each build
-   * @property VERSION
-   * @final
-   * @type {String}
+   * connect two nodes with a new edge.
+   *
+   * @private
    */
-  Hammer.VERSION = '1.1.3';
+  exports._editEdge = function(sourceNodeId,targetNodeId) {
+    if (this.editMode == true) {
+      var defaultData = {id: this.edgeBeingEdited.id, from:sourceNodeId, to:targetNodeId};
+      if (this.triggerFunctions.editEdge) {
+        if (this.triggerFunctions.editEdge.length == 2) {
+          var me = this;
+          this.triggerFunctions.editEdge(defaultData, function(finalizedData) {
+            me.edgesData.update(finalizedData);
+            me.moving = true;
+            me.start();
+          });
+        }
+        else {
+          throw new Error('The function for edit does not support two arguments (data, callback)');
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  };
 
   /**
-   * default settings.
-   * more settings are defined per gesture at `/gestures`. Each gesture can be disabled/enabled
-   * by setting it's name (like `swipe`) to false.
-   * You can set the defaults for all instances by changing this object before creating an instance.
-   * @example
-   * ````
-   *  Hammer.defaults.drag = false;
-   *  Hammer.defaults.behavior.touchAction = 'pan-y';
-   *  delete Hammer.defaults.behavior.userSelect;
-   * ````
-   * @property defaults
-   * @type {Object}
+   * Create the toolbar to edit the selected node. The label and the color can be changed. Other colors are derived from the chosen color.
+   *
+   * @private
    */
-  Hammer.defaults = {
-      /**
-       * this setting object adds styles and attributes to the element to prevent the browser from doing
-       * its native behavior. The css properties are auto prefixed for the browsers when needed.
-       * @property defaults.behavior
-       * @type {Object}
-       */
-      behavior: {
-          /**
-           * Disables text selection to improve the dragging gesture. When the value is `none` it also sets
-           * `onselectstart=false` for IE on the element. Mainly for desktop browsers.
-           * @property defaults.behavior.userSelect
-           * @type {String}
-           * @default 'none'
-           */
-          userSelect: 'none',
-
-          /**
-           * Specifies whether and how a given region can be manipulated by the user (for instance, by panning or zooming).
-           * Used by Chrome 35> and IE10>. By default this makes the element blocking any touch event.
-           * @property defaults.behavior.touchAction
-           * @type {String}
-           * @default: 'pan-y'
-           */
-          touchAction: 'pan-y',
+  exports._editNode = function() {
+    if (this.triggerFunctions.edit && this.editMode == true) {
+      var node = this._getSelectedNode();
+      var data = {id:node.id,
+        label: node.label,
+        group: node.options.group,
+        shape: node.options.shape,
+        color: {
+          background:node.options.color.background,
+          border:node.options.color.border,
+          highlight: {
+            background:node.options.color.highlight.background,
+            border:node.options.color.highlight.border
+          }
+        }};
+      if (this.triggerFunctions.edit.length == 2) {
+        var me = this;
+        this.triggerFunctions.edit(data, function (finalizedData) {
+          me.nodesData.update(finalizedData);
+          me._createManipulatorBar();
+          me.moving = true;
+          me.start();
+        });
+      }
+      else {
+        throw new Error('The function for edit does not support two arguments (data, callback)');
+      }
+    }
+    else {
+      throw new Error('No edit function has been bound to this button');
+    }
+  };
 
-          /**
-           * Disables the default callout shown when you touch and hold a touch target.
-           * On iOS, when you touch and hold a touch target such as a link, Safari displays
-           * a callout containing information about the link. This property allows you to disable that callout.
-           * @property defaults.behavior.touchCallout
-           * @type {String}
-           * @default 'none'
-           */
-          touchCallout: 'none',
 
-          /**
-           * Specifies whether zooming is enabled. Used by IE10>
-           * @property defaults.behavior.contentZooming
-           * @type {String}
-           * @default 'none'
-           */
-          contentZooming: 'none',
 
-          /**
-           * Specifies that an entire element should be draggable instead of its contents.
-           * Mainly for desktop browsers.
-           * @property defaults.behavior.userDrag
-           * @type {String}
-           * @default 'none'
-           */
-          userDrag: 'none',
 
-          /**
-           * Overrides the highlight color shown when the user taps a link or a JavaScript
-           * clickable element in Safari on iPhone. This property obeys the alpha value, if specified.
-           *
-           * If you don't specify an alpha value, Safari on iPhone applies a default alpha value
-           * to the color. To disable tap highlighting, set the alpha value to 0 (invisible).
-           * If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.
-           * @property defaults.behavior.tapHighlightColor
-           * @type {String}
-           * @default 'rgba(0,0,0,0)'
-           */
-          tapHighlightColor: 'rgba(0,0,0,0)'
+  /**
+   * delete everything in the selection
+   *
+   * @private
+   */
+  exports._deleteSelected = function() {
+    if (!this._selectionIsEmpty() && this.editMode == true) {
+      if (!this._clusterInSelection()) {
+        var selectedNodes = this.getSelectedNodes();
+        var selectedEdges = this.getSelectedEdges();
+        if (this.triggerFunctions.del) {
+          var me = this;
+          var data = {nodes: selectedNodes, edges: selectedEdges};
+          if (this.triggerFunctions.del.length == 2) {
+            this.triggerFunctions.del(data, function (finalizedData) {
+              me.edgesData.remove(finalizedData.edges);
+              me.nodesData.remove(finalizedData.nodes);
+              me._unselectAll();
+              me.moving = true;
+              me.start();
+            });
+          }
+          else {
+            throw new Error('The function for delete does not support two arguments (data, callback)')
+          }
+        }
+        else {
+          this.edgesData.remove(selectedEdges);
+          this.nodesData.remove(selectedNodes);
+          this._unselectAll();
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        alert(this.constants.locales[this.constants.locale]["deleteClusterError"]);
       }
+    }
   };
 
-  /**
-   * hammer document where the base events are added at
-   * @property DOCUMENT
-   * @type {HTMLElement}
-   * @default window.document
-   */
-  Hammer.DOCUMENT = document;
 
-  /**
-   * detect support for pointer events
-   * @property HAS_POINTEREVENTS
-   * @type {Boolean}
-   */
-  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
+/***/ },
+/* 62 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * detect support for touch events
-   * @property HAS_TOUCHEVENTS
-   * @type {Boolean}
-   */
-  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
+  var util = __webpack_require__(1);
+  var Hammer = __webpack_require__(45);
 
-  /**
-   * detect mobile browsers
-   * @property IS_MOBILE
-   * @type {Boolean}
-   */
-  Hammer.IS_MOBILE = /mobile|tablet|ip(ad|hone|od)|android|silk/i.test(navigator.userAgent);
+  exports._cleanNavigation = function() {
+    // clean hammer bindings
+    if (this.navigationHammers.existing.length != 0) {
+      for (var i = 0; i < this.navigationHammers.existing.length; i++) {
+        this.navigationHammers.existing[i].dispose();
+      }
+      this.navigationHammers.existing = [];
+    }
+
+    this._navigationReleaseOverload = function () {};
+
+    // clean up previous navigation items
+    if (this.navigationDivs && this.navigationDivs['wrapper'] && this.navigationDivs['wrapper'].parentNode) {
+      this.navigationDivs['wrapper'].parentNode.removeChild(this.navigationDivs['wrapper']);
+    }
+  };
 
   /**
-   * detect if we want to support mouseevents at all
-   * @property NO_MOUSEEVENTS
-   * @type {Boolean}
+   * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
+   * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
+   * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
+   * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
+   *
+   * @private
    */
-  Hammer.NO_MOUSEEVENTS = (Hammer.HAS_TOUCHEVENTS && Hammer.IS_MOBILE) || Hammer.HAS_POINTEREVENTS;
+  exports._loadNavigationElements = function() {
+    this._cleanNavigation();
+
+    this.navigationDivs = {};
+    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
+    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
+
+    this.navigationDivs['wrapper'] = document.createElement('div');
+    this.frame.appendChild(this.navigationDivs['wrapper']);
+
+    for (var i = 0; i < navigationDivs.length; i++) {
+      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
+      this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
+      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+
+      var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
+      hammer.on('touch', this[navigationDivActions[i]].bind(this));
+      this.navigationHammers._new.push(hammer);
+    }
+
+    this._navigationReleaseOverload = this._stopMovement;
+
+    this.navigationHammers.existing = this.navigationHammers._new;
+  };
+
 
   /**
-   * interval in which Hammer recalculates current velocity/direction/angle in ms
-   * @property CALCULATE_INTERVAL
-   * @type {Number}
-   * @default 25
+   * this stops all movement induced by the navigation buttons
+   *
+   * @private
    */
-  Hammer.CALCULATE_INTERVAL = 25;
+  exports._zoomExtent = function(event) {
+    this.zoomExtent({duration:700});
+    event.stopPropagation();
+  };
 
   /**
-   * eventtypes per touchevent (start, move, end) are filled by `Event.determineEventTypes` on `setup`
-   * the object contains the DOM event names per type (`EVENT_START`, `EVENT_MOVE`, `EVENT_END`)
-   * @property EVENT_TYPES
+   * this stops all movement induced by the navigation buttons
+   *
    * @private
-   * @writeOnce
-   * @type {Object}
    */
-  var EVENT_TYPES = {};
+  exports._stopMovement = function() {
+    this._xStopMoving();
+    this._yStopMoving();
+    this._stopZoom();
+  };
+
 
   /**
-   * direction strings, for safe comparisons
-   * @property DIRECTION_DOWN|LEFT|UP|RIGHT
-   * @final
-   * @type {String}
-   * @default 'down' 'left' 'up' 'right'
+   * move the screen up
+   * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
+   * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently
+   * To avoid this behaviour, we do the translation in the start loop.
+   *
+   * @private
    */
-  var DIRECTION_DOWN = Hammer.DIRECTION_DOWN = 'down';
-  var DIRECTION_LEFT = Hammer.DIRECTION_LEFT = 'left';
-  var DIRECTION_UP = Hammer.DIRECTION_UP = 'up';
-  var DIRECTION_RIGHT = Hammer.DIRECTION_RIGHT = 'right';
+  exports._moveUp = function(event) {
+    this.yIncrement = this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    event.preventDefault();
+  };
+
 
   /**
-   * pointertype strings, for safe comparisons
-   * @property POINTER_MOUSE|TOUCH|PEN
-   * @final
-   * @type {String}
-   * @default 'mouse' 'touch' 'pen'
+   * move the screen down
+   * @private
    */
-  var POINTER_MOUSE = Hammer.POINTER_MOUSE = 'mouse';
-  var POINTER_TOUCH = Hammer.POINTER_TOUCH = 'touch';
-  var POINTER_PEN = Hammer.POINTER_PEN = 'pen';
+  exports._moveDown = function(event) {
+    this.yIncrement = -this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    event.preventDefault();
+  };
+
 
   /**
-   * eventtypes
-   * @property EVENT_START|MOVE|END|RELEASE|TOUCH
-   * @final
-   * @type {String}
-   * @default 'start' 'change' 'move' 'end' 'release' 'touch'
+   * move the screen left
+   * @private
    */
-  var EVENT_START = Hammer.EVENT_START = 'start';
-  var EVENT_MOVE = Hammer.EVENT_MOVE = 'move';
-  var EVENT_END = Hammer.EVENT_END = 'end';
-  var EVENT_RELEASE = Hammer.EVENT_RELEASE = 'release';
-  var EVENT_TOUCH = Hammer.EVENT_TOUCH = 'touch';
+  exports._moveLeft = function(event) {
+    this.xIncrement = this.constants.keyboard.speed.x;
+    this.start(); // if there is no node movement, the calculation wont be done
+    event.preventDefault();
+  };
+
 
   /**
-   * if the window events are set...
-   * @property READY
-   * @writeOnce
-   * @type {Boolean}
-   * @default false
+   * move the screen right
+   * @private
    */
-  Hammer.READY = false;
+  exports._moveRight = function(event) {
+    this.xIncrement = -this.constants.keyboard.speed.y;
+    this.start(); // if there is no node movement, the calculation wont be done
+    event.preventDefault();
+  };
+
 
   /**
-   * plugins namespace
-   * @property plugins
-   * @type {Object}
+   * Zoom in, using the same method as the movement.
+   * @private
    */
-  Hammer.plugins = Hammer.plugins || {};
+  exports._zoomIn = function(event) {
+    this.zoomIncrement = this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    event.preventDefault();
+  };
+
 
   /**
-   * gestures namespace
-   * see `/gestures` for the definitions
-   * @property gestures
-   * @type {Object}
+   * Zoom out
+   * @private
    */
-  Hammer.gestures = Hammer.gestures || {};
+  exports._zoomOut = function(event) {
+    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
+    this.start(); // if there is no node movement, the calculation wont be done
+    event.preventDefault();
+  };
+
 
   /**
-   * setup events to detect gestures on the document
-   * this function is called when creating an new instance
+   * Stop zooming and unhighlight the zoom controls
    * @private
    */
-  function setup() {
-      if(Hammer.READY) {
-          return;
-      }
-
-      // find what eventtypes we add listeners to
-      Event.determineEventTypes();
+  exports._stopZoom = function(event) {
+    this.zoomIncrement = 0;
+    event && event.preventDefault();
+  };
 
-      // Register all gestures inside Hammer.gestures
-      Utils.each(Hammer.gestures, function(gesture) {
-          Detection.register(gesture);
-      });
 
-      // Add touch events on the document
-      Event.onTouch(Hammer.DOCUMENT, EVENT_MOVE, Detection.detect);
-      Event.onTouch(Hammer.DOCUMENT, EVENT_END, Detection.detect);
+  /**
+   * Stop moving in the Y direction and unHighlight the up and down
+   * @private
+   */
+  exports._yStopMoving = function(event) {
+    this.yIncrement = 0;
+    event && event.preventDefault();
+  };
 
-      // Hammer is ready...!
-      Hammer.READY = true;
-  }
 
   /**
-   * @module hammer
-   *
-   * @class Utils
-   * @static
+   * Stop moving in the X direction and unHighlight left and right.
+   * @private
    */
-  var Utils = Hammer.utils = {
-      /**
-       * extend method, could also be used for cloning when `dest` is an empty object.
-       * changes the dest object
-       * @method extend
-       * @param {Object} dest
-       * @param {Object} src
-       * @param {Boolean} [merge=false]  do a merge
-       * @return {Object} dest
-       */
-      extend: function extend(dest, src, merge) {
-          for(var key in src) {
-              if(!src.hasOwnProperty(key) || (dest[key] !== undefined && merge)) {
-                  continue;
-              }
-              dest[key] = src[key];
-          }
-          return dest;
-      },
-
-      /**
-       * simple addEventListener wrapper
-       * @method on
-       * @param {HTMLElement} element
-       * @param {String} type
-       * @param {Function} handler
-       */
-      on: function on(element, type, handler) {
-          element.addEventListener(type, handler, false);
-      },
+  exports._xStopMoving = function(event) {
+    this.xIncrement = 0;
+    event && event.preventDefault();
+  };
 
-      /**
-       * simple removeEventListener wrapper
-       * @method off
-       * @param {HTMLElement} element
-       * @param {String} type
-       * @param {Function} handler
-       */
-      off: function off(element, type, handler) {
-          element.removeEventListener(type, handler, false);
-      },
 
-      /**
-       * forEach over arrays and objects
-       * @method each
-       * @param {Object|Array} obj
-       * @param {Function} iterator
-       * @param {any} iterator.item
-       * @param {Number} iterator.index
-       * @param {Object|Array} iterator.obj the source object
-       * @param {Object} context value to use as `this` in the iterator
-       */
-      each: function each(obj, iterator, context) {
-          var i, len;
+/***/ },
+/* 63 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // native forEach on arrays
-          if('forEach' in obj) {
-              obj.forEach(iterator, context);
-          // arrays
-          } else if(obj.length !== undefined) {
-              for(i = 0, len = obj.length; i < len; i++) {
-                  if(iterator.call(context, obj[i], i, obj) === false) {
-                      return;
-                  }
-              }
-          // objects
-          } else {
-              for(i in obj) {
-                  if(obj.hasOwnProperty(i) &&
-                      iterator.call(context, obj[i], i, obj) === false) {
-                      return;
-                  }
-              }
-          }
-      },
+  exports._resetLevels = function() {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        if (node.preassignedLevel == false) {
+          node.level = -1;
+          node.hierarchyEnumerated = false;
+        }
+      }
+    }
+  };
 
-      /**
-       * find if a string contains the string using indexOf
-       * @method inStr
-       * @param {String} src
-       * @param {String} find
-       * @return {Boolean} found
-       */
-      inStr: function inStr(src, find) {
-          return src.indexOf(find) > -1;
-      },
+  /**
+   * This is the main function to layout the nodes in a hierarchical way.
+   * It checks if the node details are supplied correctly
+   *
+   * @private
+   */
+  exports._setupHierarchicalLayout = function() {
+    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
+      // get the size of the largest hubs and check if the user has defined a level for a node.
+      var hubsize = 0;
+      var node, nodeId;
+      var definedLevel = false;
+      var undefinedLevel = false;
 
-      /**
-       * find if a array contains the object using indexOf or a simple polyfill
-       * @method inArray
-       * @param {String} src
-       * @param {String} find
-       * @return {Boolean|Number} false when not found, or the index
-       */
-      inArray: function inArray(src, find) {
-          if(src.indexOf) {
-              var index = src.indexOf(find);
-              return (index === -1) ? false : index;
-          } else {
-              for(var i = 0, len = src.length; i < len; i++) {
-                  if(src[i] === find) {
-                      return i;
-                  }
-              }
-              return false;
+      for (nodeId in this.nodes) {
+        if (this.nodes.hasOwnProperty(nodeId)) {
+          node = this.nodes[nodeId];
+          if (node.level != -1) {
+            definedLevel = true;
           }
-      },
+          else {
+            undefinedLevel = true;
+          }
+          if (hubsize < node.edges.length) {
+            hubsize = node.edges.length;
+          }
+        }
+      }
 
-      /**
-       * convert an array-like object (`arguments`, `touchlist`) to an array
-       * @method toArray
-       * @param {Object} obj
-       * @return {Array}
-       */
-      toArray: function toArray(obj) {
-          return Array.prototype.slice.call(obj, 0);
-      },
+      // if the user defined some levels but not all, alert and run without hierarchical layout
+      if (undefinedLevel == true && definedLevel == true) {
+        throw new Error("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
+        this.zoomExtent({duration:0},true,this.constants.clustering.enabled);
+        if (!this.constants.clustering.enabled) {
+          this.start();
+        }
+      }
+      else {
+        // setup the system to use hierarchical method.
+        this._changeConstants();
 
-      /**
-       * find if a node is in the given parent
-       * @method hasParent
-       * @param {HTMLElement} node
-       * @param {HTMLElement} parent
-       * @return {Boolean} found
-       */
-      hasParent: function hasParent(node, parent) {
-          while(node) {
-              if(node == parent) {
-                  return true;
-              }
-              node = node.parentNode;
+        // define levels if undefined by the users. Based on hubsize
+        if (undefinedLevel == true) {
+          if (this.constants.hierarchicalLayout.layout == "hubsize") {
+            this._determineLevels(hubsize);
+          }
+          else {
+            this._determineLevelsDirected(false);
           }
-          return false;
-      },
 
-      /**
-       * get the center of all the touches
-       * @method getCenter
-       * @param {Array} touches
-       * @return {Object} center contains `pageX`, `pageY`, `clientX` and `clientY` properties
-       */
-      getCenter: function getCenter(touches) {
-          var pageX = [],
-              pageY = [],
-              clientX = [],
-              clientY = [],
-              min = Math.min,
-              max = Math.max;
+        }
+        // check the distribution of the nodes per level.
+        var distribution = this._getDistribution();
 
-          // no need to loop when only one touch
-          if(touches.length === 1) {
-              return {
-                  pageX: touches[0].pageX,
-                  pageY: touches[0].pageY,
-                  clientX: touches[0].clientX,
-                  clientY: touches[0].clientY
-              };
-          }
+        // place the nodes on the canvas. This also stablilizes the system.
+        this._placeNodesByHierarchy(distribution);
 
-          Utils.each(touches, function(touch) {
-              pageX.push(touch.pageX);
-              pageY.push(touch.pageY);
-              clientX.push(touch.clientX);
-              clientY.push(touch.clientY);
-          });
+        // start the simulation.
+        this.start();
+      }
+    }
+  };
 
-          return {
-              pageX: (min.apply(Math, pageX) + max.apply(Math, pageX)) / 2,
-              pageY: (min.apply(Math, pageY) + max.apply(Math, pageY)) / 2,
-              clientX: (min.apply(Math, clientX) + max.apply(Math, clientX)) / 2,
-              clientY: (min.apply(Math, clientY) + max.apply(Math, clientY)) / 2
-          };
-      },
 
-      /**
-       * calculate the velocity between two points. unit is in px per ms.
-       * @method getVelocity
-       * @param {Number} deltaTime
-       * @param {Number} deltaX
-       * @param {Number} deltaY
-       * @return {Object} velocity `x` and `y`
-       */
-      getVelocity: function getVelocity(deltaTime, deltaX, deltaY) {
-          return {
-              x: Math.abs(deltaX / deltaTime) || 0,
-              y: Math.abs(deltaY / deltaTime) || 0
-          };
-      },
+  /**
+   * This function places the nodes on the canvas based on the hierarchial distribution.
+   *
+   * @param {Object} distribution | obtained by the function this._getDistribution()
+   * @private
+   */
+  exports._placeNodesByHierarchy = function(distribution) {
+    var nodeId, node;
 
-      /**
-       * calculate the angle between two coordinates
-       * @method getAngle
-       * @param {Touch} touch1
-       * @param {Touch} touch2
-       * @return {Number} angle
-       */
-      getAngle: function getAngle(touch1, touch2) {
-          var x = touch2.clientX - touch1.clientX,
-              y = touch2.clientY - touch1.clientY;
+    // start placing all the level 0 nodes first. Then recursively position their branches.
+    for (var level in distribution) {
+      if (distribution.hasOwnProperty(level)) {
 
-          return Math.atan2(y, x) * 180 / Math.PI;
-      },
+        for (nodeId in distribution[level].nodes) {
+          if (distribution[level].nodes.hasOwnProperty(nodeId)) {
+            node = distribution[level].nodes[nodeId];
+            if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+              if (node.xFixed) {
+                node.x = distribution[level].minPos;
+                node.xFixed = false;
 
-      /**
-       * do a small comparision to get the direction between two touches.
-       * @method getDirection
-       * @param {Touch} touch1
-       * @param {Touch} touch2
-       * @return {String} direction matches `DIRECTION_LEFT|RIGHT|UP|DOWN`
-       */
-      getDirection: function getDirection(touch1, touch2) {
-          var x = Math.abs(touch1.clientX - touch2.clientX),
-              y = Math.abs(touch1.clientY - touch2.clientY);
+                distribution[level].minPos += distribution[level].nodeSpacing;
+              }
+            }
+            else {
+              if (node.yFixed) {
+                node.y = distribution[level].minPos;
+                node.yFixed = false;
 
-          if(x >= y) {
-              return touch1.clientX - touch2.clientX > 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
+                distribution[level].minPos += distribution[level].nodeSpacing;
+              }
+            }
+            this._placeBranchNodes(node.edges,node.id,distribution,node.level);
           }
-          return touch1.clientY - touch2.clientY > 0 ? DIRECTION_UP : DIRECTION_DOWN;
-      },
-
-      /**
-       * calculate the distance between two touches
-       * @method getDistance
-       * @param {Touch}touch1
-       * @param {Touch} touch2
-       * @return {Number} distance
-       */
-      getDistance: function getDistance(touch1, touch2) {
-          var x = touch2.clientX - touch1.clientX,
-              y = touch2.clientY - touch1.clientY;
-
-          return Math.sqrt((x * x) + (y * y));
-      },
+        }
+      }
+    }
 
-      /**
-       * calculate the scale factor between two touchLists
-       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
-       * @method getScale
-       * @param {Array} start array of touches
-       * @param {Array} end array of touches
-       * @return {Number} scale
-       */
-      getScale: function getScale(start, end) {
-          // need two fingers...
-          if(start.length >= 2 && end.length >= 2) {
-              return this.getDistance(end[0], end[1]) / this.getDistance(start[0], start[1]);
-          }
-          return 1;
-      },
+    // stabilize the system after positioning. This function calls zoomExtent.
+    this._stabilize();
+  };
 
-      /**
-       * calculate the rotation degrees between two touchLists
-       * @method getRotation
-       * @param {Array} start array of touches
-       * @param {Array} end array of touches
-       * @return {Number} rotation
-       */
-      getRotation: function getRotation(start, end) {
-          // need two fingers
-          if(start.length >= 2 && end.length >= 2) {
-              return this.getAngle(end[1], end[0]) - this.getAngle(start[1], start[0]);
-          }
-          return 0;
-      },
 
-      /**
-       * find out if the direction is vertical   *
-       * @method isVertical
-       * @param {String} direction matches `DIRECTION_UP|DOWN`
-       * @return {Boolean} is_vertical
-       */
-      isVertical: function isVertical(direction) {
-          return direction == DIRECTION_UP || direction == DIRECTION_DOWN;
-      },
+  /**
+   * This function get the distribution of levels based on hubsize
+   *
+   * @returns {Object}
+   * @private
+   */
+  exports._getDistribution = function() {
+    var distribution = {};
+    var nodeId, node, level;
 
-      /**
-       * set css properties with their prefixes
-       * @param {HTMLElement} element
-       * @param {String} prop
-       * @param {String} value
-       * @param {Boolean} [toggle=true]
-       * @return {Boolean}
-       */
-      setPrefixedCss: function setPrefixedCss(element, prop, value, toggle) {
-          var prefixes = ['', 'Webkit', 'Moz', 'O', 'ms'];
-          prop = Utils.toCamelCase(prop);
+    // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
+    // the fix of X is removed after the x value has been set.
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        node.xFixed = true;
+        node.yFixed = true;
+        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+          node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
+        }
+        else {
+          node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
+        }
+        if (distribution[node.level] === undefined) {
+          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+        }
+        distribution[node.level].amount += 1;
+        distribution[node.level].nodes[nodeId] = node;
+      }
+    }
 
-          for(var i = 0; i < prefixes.length; i++) {
-              var p = prop;
-              // prefixes
-              if(prefixes[i]) {
-                  p = prefixes[i] + p.slice(0, 1).toUpperCase() + p.slice(1);
-              }
+    // determine the largest amount of nodes of all levels
+    var maxCount = 0;
+    for (level in distribution) {
+      if (distribution.hasOwnProperty(level)) {
+        if (maxCount < distribution[level].amount) {
+          maxCount = distribution[level].amount;
+        }
+      }
+    }
 
-              // test the style
-              if(p in element.style) {
-                  element.style[p] = (toggle == null || toggle) && value || '';
-                  break;
-              }
-          }
-      },
+    // set the initial position and spacing of each nodes accordingly
+    for (level in distribution) {
+      if (distribution.hasOwnProperty(level)) {
+        distribution[level].nodeSpacing = (maxCount + 1) * this.constants.hierarchicalLayout.nodeSpacing;
+        distribution[level].nodeSpacing /= (distribution[level].amount + 1);
+        distribution[level].minPos = distribution[level].nodeSpacing - (0.5 * (distribution[level].amount + 1) * distribution[level].nodeSpacing);
+      }
+    }
 
-      /**
-       * toggle browser default behavior by setting css properties.
-       * `userSelect='none'` also sets `element.onselectstart` to false
-       * `userDrag='none'` also sets `element.ondragstart` to false
-       *
-       * @method toggleBehavior
-       * @param {HtmlElement} element
-       * @param {Object} props
-       * @param {Boolean} [toggle=true]
-       */
-      toggleBehavior: function toggleBehavior(element, props, toggle) {
-          if(!props || !element || !element.style) {
-              return;
-          }
+    return distribution;
+  };
 
-          // set the css properties
-          Utils.each(props, function(value, prop) {
-              Utils.setPrefixedCss(element, prop, value, toggle);
-          });
 
-          var falseFn = toggle && function() {
-              return false;
-          };
+  /**
+   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+   *
+   * @param hubsize
+   * @private
+   */
+  exports._determineLevels = function(hubsize) {
+    var nodeId, node;
 
-          // also the disable onselectstart
-          if(props.userSelect == 'none') {
-              element.onselectstart = falseFn;
-          }
-          // and disable ondragstart
-          if(props.userDrag == 'none') {
-              element.ondragstart = falseFn;
-          }
-      },
+    // determine hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.edges.length == hubsize) {
+          node.level = 0;
+        }
+      }
+    }
 
-      /**
-       * convert a string with underscores to camelCase
-       * so prevent_default becomes preventDefault
-       * @param {String} str
-       * @return {String} camelCaseStr
-       */
-      toCamelCase: function toCamelCase(str) {
-          return str.replace(/[_-]([a-z])/g, function(s) {
-              return s[1].toUpperCase();
-          });
+    // branch from hubs
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (node.level == 0) {
+          this._setLevel(1,node.edges,node.id);
+        }
       }
+    }
   };
 
 
+
   /**
-   * @module hammer
-   */
-  /**
-   * @class Event
-   * @static
+   * this function allocates nodes in levels based on the direction of the edges
+   *
+   * @param hubsize
+   * @private
    */
-  var Event = Hammer.event = {
-      /**
-       * when touch events have been fired, this is true
-       * this is used to stop mouse events
-       * @property prevent_mouseevents
-       * @private
-       * @type {Boolean}
-       */
-      preventMouseEvents: false,
-
-      /**
-       * if EVENT_START has been fired
-       * @property started
-       * @private
-       * @type {Boolean}
-       */
-      started: false,
-
-      /**
-       * when the mouse is hold down, this is true
-       * @property should_detect
-       * @private
-       * @type {Boolean}
-       */
-      shouldDetect: false,
+  exports._determineLevelsDirected = function() {
+    var nodeId, node, firstNode;
+    var minLevel = 10000;
 
-      /**
-       * simple event binder with a hook and support for multiple types
-       * @method on
-       * @param {HTMLElement} element
-       * @param {String} type
-       * @param {Function} handler
-       * @param {Function} [hook]
-       * @param {Object} hook.type
-       */
-      on: function on(element, type, handler, hook) {
-          var types = type.split(' ');
-          Utils.each(types, function(type) {
-              Utils.on(element, type, handler);
-              hook && hook(type);
-          });
-      },
+    // set first node to source
+    firstNode = this.nodes[this.nodeIndices[0]];
+    firstNode.level = minLevel;
+    this._setLevelDirected(minLevel,firstNode.edges,firstNode.id);
 
-      /**
-       * simple event unbinder with a hook and support for multiple types
-       * @method off
-       * @param {HTMLElement} element
-       * @param {String} type
-       * @param {Function} handler
-       * @param {Function} [hook]
-       * @param {Object} hook.type
-       */
-      off: function off(element, type, handler, hook) {
-          var types = type.split(' ');
-          Utils.each(types, function(type) {
-              Utils.off(element, type, handler);
-              hook && hook(type);
-          });
-      },
+    // get the minimum level
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        minLevel = node.level < minLevel ? node.level : minLevel;
+      }
+    }
 
-      /**
-       * the core touch event handler.
-       * this finds out if we should to detect gestures
-       * @method onTouch
-       * @param {HTMLElement} element
-       * @param {String} eventType matches `EVENT_START|MOVE|END`
-       * @param {Function} handler
-       * @return onTouchHandler {Function} the core event handler
-       */
-      onTouch: function onTouch(element, eventType, handler) {
-          var self = this;
+    // subtract the minimum from the set so we have a range starting from 0
+    for (nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        node.level -= minLevel;
+      }
+    }
+  };
 
-          var onTouchHandler = function onTouchHandler(ev) {
-              var srcType = ev.type.toLowerCase(),
-                  isPointer = Hammer.HAS_POINTEREVENTS,
-                  isMouse = Utils.inStr(srcType, 'mouse'),
-                  triggerType;
 
-              // if we are in a mouseevent, but there has been a touchevent triggered in this session
-              // we want to do nothing. simply break out of the event.
-              if(isMouse && self.preventMouseEvents) {
-                  return;
+  /**
+   * Since hierarchical layout does not support:
+   *    - smooth curves (based on the physics),
+   *    - clustering (based on dynamic node counts)
+   *
+   * We disable both features so there will be no problems.
+   *
+   * @private
+   */
+  exports._changeConstants = function() {
+    this.constants.clustering.enabled = false;
+    this.constants.physics.barnesHut.enabled = false;
+    this.constants.physics.hierarchicalRepulsion.enabled = true;
+    this._loadSelectedForceSolver();
+    if (this.constants.smoothCurves.enabled == true) {
+      this.constants.smoothCurves.dynamic = false;
+    }
+    this._configureSmoothCurves();
 
-              // mousebutton must be down
-              } else if(isMouse && eventType == EVENT_START && ev.button === 0) {
-                  self.preventMouseEvents = false;
-                  self.shouldDetect = true;
-              } else if(isPointer && eventType == EVENT_START) {
-                  self.shouldDetect = (ev.buttons === 1 || PointerEvent.matchType(POINTER_TOUCH, ev));
-              // just a valid start event, but no mouse
-              } else if(!isMouse && eventType == EVENT_START) {
-                  self.preventMouseEvents = true;
-                  self.shouldDetect = true;
-              }
+    var config = this.constants.hierarchicalLayout;
+    config.levelSeparation = Math.abs(config.levelSeparation);
+    if (config.direction == "RL" || config.direction == "DU") {
+      config.levelSeparation *= -1;
+    }
 
-              // update the pointer event before entering the detection
-              if(isPointer && eventType != EVENT_END) {
-                  PointerEvent.updatePointer(eventType, ev);
-              }
+    if (config.direction == "RL" || config.direction == "LR") {
+      if (this.constants.smoothCurves.enabled == true) {
+        this.constants.smoothCurves.type = "vertical";
+      }
+    }
+    else {
+      if (this.constants.smoothCurves.enabled == true) {
+        this.constants.smoothCurves.type = "horizontal";
+      }
+    }
+  };
 
-              // we are in a touch/down state, so allowed detection of gestures
-              if(self.shouldDetect) {
-                  triggerType = self.doDetect.call(self, ev, eventType, element, handler);
-              }
 
-              // ...and we are done with the detection
-              // so reset everything to start each detection totally fresh
-              if(triggerType == EVENT_END) {
-                  self.preventMouseEvents = false;
-                  self.shouldDetect = false;
-                  PointerEvent.reset();
-              // update the pointerevent object after the detection
-              }
+  /**
+   * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
+   * on a X position that ensures there will be no overlap.
+   *
+   * @param edges
+   * @param parentId
+   * @param distribution
+   * @param parentLevel
+   * @private
+   */
+  exports._placeBranchNodes = function(edges, parentId, distribution, parentLevel) {
+    for (var i = 0; i < edges.length; i++) {
+      var childNode = null;
+      if (edges[i].toId == parentId) {
+        childNode = edges[i].from;
+      }
+      else {
+        childNode = edges[i].to;
+      }
 
-              if(isPointer && eventType == EVENT_END) {
-                  PointerEvent.updatePointer(eventType, ev);
-              }
-          };
+      // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
+      var nodeMoved = false;
+      if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
+        if (childNode.xFixed && childNode.level > parentLevel) {
+          childNode.xFixed = false;
+          childNode.x = distribution[childNode.level].minPos;
+          nodeMoved = true;
+        }
+      }
+      else {
+        if (childNode.yFixed && childNode.level > parentLevel) {
+          childNode.yFixed = false;
+          childNode.y = distribution[childNode.level].minPos;
+          nodeMoved = true;
+        }
+      }
 
-          this.on(element, EVENT_TYPES[eventType], onTouchHandler);
-          return onTouchHandler;
-      },
+      if (nodeMoved == true) {
+        distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
+        if (childNode.edges.length > 1) {
+          this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
+        }
+      }
+    }
+  };
 
-      /**
-       * the core detection method
-       * this finds out what hammer-touch-events to trigger
-       * @method doDetect
-       * @param {Object} ev
-       * @param {String} eventType matches `EVENT_START|MOVE|END`
-       * @param {HTMLElement} element
-       * @param {Function} handler
-       * @return {String} triggerType matches `EVENT_START|MOVE|END`
-       */
-      doDetect: function doDetect(ev, eventType, element, handler) {
-          var touchList = this.getTouchList(ev, eventType);
-          var touchListLength = touchList.length;
-          var triggerType = eventType;
-          var triggerChange = touchList.trigger; // used by fakeMultitouch plugin
-          var changedLength = touchListLength;
 
-          // at each touchstart-like event we want also want to trigger a TOUCH event...
-          if(eventType == EVENT_START) {
-              triggerChange = EVENT_TOUCH;
-          // ...the same for a touchend-like event
-          } else if(eventType == EVENT_END) {
-              triggerChange = EVENT_RELEASE;
+  /**
+   * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
+   *
+   * @param level
+   * @param edges
+   * @param parentId
+   * @private
+   */
+  exports._setLevel = function(level, edges, parentId) {
+    for (var i = 0; i < edges.length; i++) {
+      var childNode = null;
+      if (edges[i].toId == parentId) {
+        childNode = edges[i].from;
+      }
+      else {
+        childNode = edges[i].to;
+      }
+      if (childNode.level == -1 || childNode.level > level) {
+        childNode.level = level;
+        if (childNode.edges.length > 1) {
+          this._setLevel(level+1, childNode.edges, childNode.id);
+        }
+      }
+    }
+  };
 
-              // keep track of how many touches have been removed
-              changedLength = touchList.length - ((ev.changedTouches) ? ev.changedTouches.length : 1);
-          }
 
-          // after there are still touches on the screen,
-          // we just want to trigger a MOVE event. so change the START or END to a MOVE
-          // but only after detection has been started, the first time we actualy want a START
-          if(changedLength > 0 && this.started) {
-              triggerType = EVENT_MOVE;
-          }
+  /**
+   * this function is called recursively to enumerate the branched of the first node and give each node a level based on edge direction
+   *
+   * @param level
+   * @param edges
+   * @param parentId
+   * @private
+   */
+  exports._setLevelDirected = function(level, edges, parentId) {
+    this.nodes[parentId].hierarchyEnumerated = true;
+    var childNode, direction;
+    for (var i = 0; i < edges.length; i++) {
+      direction = 1;
+      if (edges[i].toId == parentId) {
+        childNode = edges[i].from;
+        direction = -1;
+      }
+      else {
+        childNode = edges[i].to;
+      }
+      if (childNode.level == -1) {
+        childNode.level = level + direction;
+      }
+    }
 
-          // detection has been started, we keep track of this, see above
-          this.started = true;
+    for (var i = 0; i < edges.length; i++) {
+      if (edges[i].toId == parentId) {childNode = edges[i].from;}
+      else {childNode = edges[i].to;}
 
-          // generate some event data, some basic information
-          var evData = this.collectEventData(element, triggerType, touchList, ev);
+      if (childNode.edges.length > 1 && childNode.hierarchyEnumerated === false) {
+        this._setLevelDirected(childNode.level, childNode.edges, childNode.id);
+      }
+    }
+  };
 
-          // trigger the triggerType event before the change (TOUCH, RELEASE) events
-          // but the END event should be at last
-          if(eventType != EVENT_END) {
-              handler.call(Detection, evData);
-          }
 
-          // trigger a change (TOUCH, RELEASE) event, this means the length of the touches changed
-          if(triggerChange) {
-              evData.changedLength = changedLength;
-              evData.eventType = triggerChange;
+  /**
+   * Unfix nodes
+   *
+   * @private
+   */
+  exports._restoreNodes = function() {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        this.nodes[nodeId].xFixed = false;
+        this.nodes[nodeId].yFixed = false;
+      }
+    }
+  };
 
-              handler.call(Detection, evData);
 
-              evData.eventType = triggerType;
-              delete evData.changedLength;
-          }
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // trigger the END event
-          if(triggerType == EVENT_END) {
-              handler.call(Detection, evData);
+  var util = __webpack_require__(1);
+  var RepulsionMixin = __webpack_require__(67);
+  var HierarchialRepulsionMixin = __webpack_require__(68);
+  var BarnesHutMixin = __webpack_require__(69);
 
-              // ...and we are done with the detection
-              // so reset everything to start each detection totally fresh
-              this.started = false;
-          }
+  /**
+   * Toggling barnes Hut calculation on and off.
+   *
+   * @private
+   */
+  exports._toggleBarnesHut = function () {
+    this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
+    this._loadSelectedForceSolver();
+    this.moving = true;
+    this.start();
+  };
 
-          return triggerType;
-      },
 
-      /**
-       * we have different events for each device/browser
-       * determine what we need and set them in the EVENT_TYPES constant
-       * the `onTouch` method is bind to these properties.
-       * @method determineEventTypes
-       * @return {Object} events
-       */
-      determineEventTypes: function determineEventTypes() {
-          var types;
-          if(Hammer.HAS_POINTEREVENTS) {
-              if(window.PointerEvent) {
-                  types = [
-                      'pointerdown',
-                      'pointermove',
-                      'pointerup pointercancel lostpointercapture'
-                  ];
-              } else {
-                  types = [
-                      'MSPointerDown',
-                      'MSPointerMove',
-                      'MSPointerUp MSPointerCancel MSLostPointerCapture'
-                  ];
-              }
-          } else if(Hammer.NO_MOUSEEVENTS) {
-              types = [
-                  'touchstart',
-                  'touchmove',
-                  'touchend touchcancel'
-              ];
-          } else {
-              types = [
-                  'touchstart mousedown',
-                  'touchmove mousemove',
-                  'touchend touchcancel mouseup'
-              ];
-          }
+  /**
+   * This loads the node force solver based on the barnes hut or repulsion algorithm
+   *
+   * @private
+   */
+  exports._loadSelectedForceSolver = function () {
+    // this overloads the this._calculateNodeForces
+    if (this.constants.physics.barnesHut.enabled == true) {
+      this._clearMixin(RepulsionMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
 
-          EVENT_TYPES[EVENT_START] = types[0];
-          EVENT_TYPES[EVENT_MOVE] = types[1];
-          EVENT_TYPES[EVENT_END] = types[2];
-          return EVENT_TYPES;
-      },
+      this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
+      this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
+      this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
+      this.constants.physics.damping = this.constants.physics.barnesHut.damping;
 
-      /**
-       * create touchList depending on the event
-       * @method getTouchList
-       * @param {Object} ev
-       * @param {String} eventType
-       * @return {Array} touches
-       */
-      getTouchList: function getTouchList(ev, eventType) {
-          // get the fake pointerEvent touchlist
-          if(Hammer.HAS_POINTEREVENTS) {
-              return PointerEvent.getTouchList();
-          }
+      this._loadMixin(BarnesHutMixin);
+    }
+    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(RepulsionMixin);
 
-          // get the touchlist
-          if(ev.touches) {
-              if(eventType == EVENT_MOVE) {
-                  return ev.touches;
-              }
+      this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
+      this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
+      this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
+      this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
 
-              var identifiers = [];
-              var concat = [].concat(Utils.toArray(ev.touches), Utils.toArray(ev.changedTouches));
-              var touchList = [];
+      this._loadMixin(HierarchialRepulsionMixin);
+    }
+    else {
+      this._clearMixin(BarnesHutMixin);
+      this._clearMixin(HierarchialRepulsionMixin);
+      this.barnesHutTree = undefined;
 
-              Utils.each(concat, function(touch) {
-                  if(Utils.inArray(identifiers, touch.identifier) === false) {
-                      touchList.push(touch);
-                  }
-                  identifiers.push(touch.identifier);
-              });
+      this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
+      this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
+      this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
+      this.constants.physics.damping = this.constants.physics.repulsion.damping;
 
-              return touchList;
-          }
+      this._loadMixin(RepulsionMixin);
+    }
+  };
 
-          // make fake touchList from mouse position
-          ev.identifier = 1;
-          return [ev];
-      },
+  /**
+   * Before calculating the forces, we check if we need to cluster to keep up performance and we check
+   * if there is more than one node. If it is just one node, we dont calculate anything.
+   *
+   * @private
+   */
+  exports._initializeForceCalculation = function () {
+    // stop calculation if there is only one node
+    if (this.nodeIndices.length == 1) {
+      this.nodes[this.nodeIndices[0]]._setForce(0, 0);
+    }
+    else {
+      // if there are too many nodes on screen, we cluster without repositioning
+      if (this.nodeIndices.length > this.constants.clustering.clusterThreshold && this.constants.clustering.enabled == true) {
+        this.clusterToFit(this.constants.clustering.reduceToNodes, false);
+      }
 
-      /**
-       * collect basic event data
-       * @method collectEventData
-       * @param {HTMLElement} element
-       * @param {String} eventType matches `EVENT_START|MOVE|END`
-       * @param {Array} touches
-       * @param {Object} ev
-       * @return {Object} ev
-       */
-      collectEventData: function collectEventData(element, eventType, touches, ev) {
-          // find out pointerType
-          var pointerType = POINTER_TOUCH;
-          if(Utils.inStr(ev.type, 'mouse') || PointerEvent.matchType(POINTER_MOUSE, ev)) {
-              pointerType = POINTER_MOUSE;
-          } else if(PointerEvent.matchType(POINTER_PEN, ev)) {
-              pointerType = POINTER_PEN;
-          }
+      // we now start the force calculation
+      this._calculateForces();
+    }
+  };
 
-          return {
-              center: Utils.getCenter(touches),
-              timeStamp: Date.now(),
-              target: ev.target,
-              touches: touches,
-              eventType: eventType,
-              pointerType: pointerType,
-              srcEvent: ev,
 
-              /**
-               * prevent the browser default actions
-               * mostly used to disable scrolling of the browser
-               */
-              preventDefault: function() {
-                  var srcEvent = this.srcEvent;
-                  srcEvent.preventManipulation && srcEvent.preventManipulation();
-                  srcEvent.preventDefault && srcEvent.preventDefault();
-              },
+  /**
+   * Calculate the external forces acting on the nodes
+   * Forces are caused by: edges, repulsing forces between nodes, gravity
+   * @private
+   */
+  exports._calculateForces = function () {
+    // Gravity is required to keep separated groups from floating off
+    // the forces are reset to zero in this loop by using _setForce instead
+    // of _addForce
 
-              /**
-               * stop bubbling the event up to its parents
-               */
-              stopPropagation: function() {
-                  this.srcEvent.stopPropagation();
-              },
+    this._calculateGravitationalForces();
+    this._calculateNodeForces();
 
-              /**
-               * immediately stop gesture detection
-               * might be useful after a swipe was detected
-               * @return {*}
-               */
-              stopDetect: function() {
-                  return Detection.stopDetect();
-              }
-          };
+    if (this.constants.physics.springConstant > 0) {
+      if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+        this._calculateSpringForcesWithSupport();
+      }
+      else {
+        if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+          this._calculateHierarchicalSpringForces();
+        }
+        else {
+          this._calculateSpringForces();
+        }
       }
+    }
   };
 
 
   /**
-   * @module hammer
+   * Smooth curves are created by adding invisible nodes in the center of the edges. These nodes are also
+   * handled in the calculateForces function. We then use a quadratic curve with the center node as control.
+   * This function joins the datanodes and invisible (called support) nodes into one object.
+   * We do this so we do not contaminate this.nodes with the support nodes.
    *
-   * @class PointerEvent
-   * @static
+   * @private
    */
-  var PointerEvent = Hammer.PointerEvent = {
-      /**
-       * holds all pointers, by `identifier`
-       * @property pointers
-       * @type {Object}
-       */
-      pointers: {},
-
-      /**
-       * get the pointers as an array
-       * @method getTouchList
-       * @return {Array} touchlist
-       */
-      getTouchList: function getTouchList() {
-          var touchlist = [];
-          // we can use forEach since pointerEvents only is in IE10
-          Utils.each(this.pointers, function(pointer) {
-              touchlist.push(pointer);
-          });
-          return touchlist;
-      },
+  exports._updateCalculationNodes = function () {
+    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+      this.calculationNodes = {};
+      this.calculationNodeIndices = [];
 
-      /**
-       * update the position of a pointer
-       * @method updatePointer
-       * @param {String} eventType matches `EVENT_START|MOVE|END`
-       * @param {Object} pointerEvent
-       */
-      updatePointer: function updatePointer(eventType, pointerEvent) {
-          if(eventType == EVENT_END || (eventType != EVENT_END && pointerEvent.buttons !== 1)) {
-              delete this.pointers[pointerEvent.pointerId];
-          } else {
-              pointerEvent.identifier = pointerEvent.pointerId;
-              this.pointers[pointerEvent.pointerId] = pointerEvent;
+      for (var nodeId in this.nodes) {
+        if (this.nodes.hasOwnProperty(nodeId)) {
+          this.calculationNodes[nodeId] = this.nodes[nodeId];
+        }
+      }
+      var supportNodes = this.sectors['support']['nodes'];
+      for (var supportNodeId in supportNodes) {
+        if (supportNodes.hasOwnProperty(supportNodeId)) {
+          if (this.edges.hasOwnProperty(supportNodes[supportNodeId].parentEdgeId)) {
+            this.calculationNodes[supportNodeId] = supportNodes[supportNodeId];
           }
-      },
-
-      /**
-       * check if ev matches pointertype
-       * @method matchType
-       * @param {String} pointerType matches `POINTER_MOUSE|TOUCH|PEN`
-       * @param {PointerEvent} ev
-       */
-      matchType: function matchType(pointerType, ev) {
-          if(!ev.pointerType) {
-              return false;
+          else {
+            supportNodes[supportNodeId]._setForce(0, 0);
           }
+        }
+      }
 
-          var pt = ev.pointerType,
-              types = {};
+      for (var idx in this.calculationNodes) {
+        if (this.calculationNodes.hasOwnProperty(idx)) {
+          this.calculationNodeIndices.push(idx);
+        }
+      }
+    }
+    else {
+      this.calculationNodes = this.nodes;
+      this.calculationNodeIndices = this.nodeIndices;
+    }
+  };
 
-          types[POINTER_MOUSE] = (pt === (ev.MSPOINTER_TYPE_MOUSE || POINTER_MOUSE));
-          types[POINTER_TOUCH] = (pt === (ev.MSPOINTER_TYPE_TOUCH || POINTER_TOUCH));
-          types[POINTER_PEN] = (pt === (ev.MSPOINTER_TYPE_PEN || POINTER_PEN));
-          return types[pointerType];
-      },
 
-      /**
-       * reset the stored pointers
-       * @method reset
-       */
-      reset: function resetList() {
-          this.pointers = {};
+  /**
+   * this function applies the central gravity effect to keep groups from floating off
+   *
+   * @private
+   */
+  exports._calculateGravitationalForces = function () {
+    var dx, dy, distance, node, i;
+    var nodes = this.calculationNodes;
+    var gravity = this.constants.physics.centralGravity;
+    var gravityForce = 0;
+
+    for (i = 0; i < this.calculationNodeIndices.length; i++) {
+      node = nodes[this.calculationNodeIndices[i]];
+      node.damping = this.constants.physics.damping; // possibly add function to alter damping properties of clusters.
+      // gravity does not apply when we are in a pocket sector
+      if (this._sector() == "default" && gravity != 0) {
+        dx = -node.x;
+        dy = -node.y;
+        distance = Math.sqrt(dx * dx + dy * dy);
+
+        gravityForce = (distance == 0) ? 0 : (gravity / distance);
+        node.fx = dx * gravityForce;
+        node.fy = dy * gravityForce;
+      }
+      else {
+        node.fx = 0;
+        node.fy = 0;
       }
+    }
   };
 
 
+
+
   /**
-   * @module hammer
+   * this function calculates the effects of the springs in the case of unsmooth curves.
    *
-   * @class Detection
-   * @static
+   * @private
    */
-  var Detection = Hammer.detection = {
-      // contains all registred Hammer.gestures in the correct order
-      gestures: [],
+  exports._calculateSpringForces = function () {
+    var edgeLength, edge, edgeId;
+    var dx, dy, fx, fy, springForce, distance;
+    var edges = this.edges;
 
-      // data of the current Hammer.gesture detection session
-      current: null,
+    // forces caused by the edges, modelled as springs
+    for (edgeId in edges) {
+      if (edges.hasOwnProperty(edgeId)) {
+        edge = edges[edgeId];
+        if (edge.connected) {
+          // only calculate forces if nodes are in the same sector
+          if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
+            edgeLength = edge.physics.springLength;
+            // this implies that the edges between big clusters are longer
+            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
 
-      // the previous Hammer.gesture session data
-      // is a full clone of the previous gesture.current object
-      previous: null,
+            dx = (edge.from.x - edge.to.x);
+            dy = (edge.from.y - edge.to.y);
+            distance = Math.sqrt(dx * dx + dy * dy);
 
-      // when this becomes true, no gestures are fired
-      stopped: false,
+            if (distance == 0) {
+              distance = 0.01;
+            }
 
-      /**
-       * start Hammer.gesture detection
-       * @method startDetect
-       * @param {Hammer.Instance} inst
-       * @param {Object} eventData
-       */
-      startDetect: function startDetect(inst, eventData) {
-          // already busy with a Hammer.gesture detection on an element
-          if(this.current) {
-              return;
+            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+
+            fx = dx * springForce;
+            fy = dy * springForce;
+
+            edge.from.fx += fx;
+            edge.from.fy += fy;
+            edge.to.fx -= fx;
+            edge.to.fy -= fy;
           }
+        }
+      }
+    }
+  };
 
-          this.stopped = false;
 
-          // holds current session
-          this.current = {
-              inst: inst, // reference to HammerInstance we're working for
-              startEvent: Utils.extend({}, eventData), // start eventData for distances, timing etc
-              lastEvent: false, // last eventData
-              lastCalcEvent: false, // last eventData for calculations.
-              futureCalcEvent: false, // last eventData for calculations.
-              lastCalcData: {}, // last lastCalcData
-              name: '' // current gesture we're in/detected, can be 'tap', 'hold' etc
-          };
 
-          this.detect(eventData);
-      },
 
-      /**
-       * Hammer.gesture detection
-       * @method detect
-       * @param {Object} eventData
-       * @return {any}
-       */
-      detect: function detect(eventData) {
-          if(!this.current || this.stopped) {
-              return;
-          }
+  /**
+   * This function calculates the springforces on the nodes, accounting for the support nodes.
+   *
+   * @private
+   */
+  exports._calculateSpringForcesWithSupport = function () {
+    var edgeLength, edge, edgeId, combinedClusterSize;
+    var edges = this.edges;
 
-          // extend event data with calculations about scale, distance etc
-          eventData = this.extendEventData(eventData);
+    // forces caused by the edges, modelled as springs
+    for (edgeId in edges) {
+      if (edges.hasOwnProperty(edgeId)) {
+        edge = edges[edgeId];
+        if (edge.connected) {
+          // only calculate forces if nodes are in the same sector
+          if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
+            if (edge.via != null) {
+              var node1 = edge.to;
+              var node2 = edge.via;
+              var node3 = edge.from;
 
-          // hammer instance and instance options
-          var inst = this.current.inst,
-              instOptions = inst.options;
+              edgeLength = edge.physics.springLength;
 
-          // call Hammer.gesture handlers
-          Utils.each(this.gestures, function triggerGesture(gesture) {
-              // only when the instance options have enabled this gesture
-              if(!this.stopped && inst.enabled && instOptions[gesture.name]) {
-                  gesture.handler.call(gesture, eventData, inst);
-              }
-          }, this);
+              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
 
-          // store as previous event event
-          if(this.current) {
-              this.current.lastEvent = eventData;
+              // this implies that the edges between big clusters are longer
+              edgeLength += combinedClusterSize * this.constants.clustering.edgeGrowth;
+              this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
+              this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
+            }
           }
+        }
+      }
+    }
+  };
 
-          if(eventData.eventType == EVENT_END) {
-              this.stopDetect();
-          }
 
-          return eventData;
-      },
+  /**
+   * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
+   *
+   * @param node1
+   * @param node2
+   * @param edgeLength
+   * @private
+   */
+  exports._calculateSpringForce = function (node1, node2, edgeLength) {
+    var dx, dy, fx, fy, springForce, distance;
 
-      /**
-       * clear the Hammer.gesture vars
-       * this is called on endDetect, but can also be used when a final Hammer.gesture has been detected
-       * to stop other Hammer.gestures from being fired
-       * @method stopDetect
-       */
-      stopDetect: function stopDetect() {
-          // clone current data to the store as the previous gesture
-          // used for the double tap gesture, since this is an other gesture detect session
-          this.previous = Utils.extend({}, this.current);
-
-          // reset the current
-          this.current = null;
-          this.stopped = true;
-      },
+    dx = (node1.x - node2.x);
+    dy = (node1.y - node2.y);
+    distance = Math.sqrt(dx * dx + dy * dy);
 
-      /**
-       * calculate velocity, angle and direction
-       * @method getVelocityData
-       * @param {Object} ev
-       * @param {Object} center
-       * @param {Number} deltaTime
-       * @param {Number} deltaX
-       * @param {Number} deltaY
-       */
-      getCalculatedData: function getCalculatedData(ev, center, deltaTime, deltaX, deltaY) {
-          var cur = this.current,
-              recalc = false,
-              calcEv = cur.lastCalcEvent,
-              calcData = cur.lastCalcData;
+    if (distance == 0) {
+      distance = 0.01;
+    }
 
-          if(calcEv && ev.timeStamp - calcEv.timeStamp > Hammer.CALCULATE_INTERVAL) {
-              center = calcEv.center;
-              deltaTime = ev.timeStamp - calcEv.timeStamp;
-              deltaX = ev.center.clientX - calcEv.center.clientX;
-              deltaY = ev.center.clientY - calcEv.center.clientY;
-              recalc = true;
-          }
+    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
 
-          if(ev.eventType == EVENT_TOUCH || ev.eventType == EVENT_RELEASE) {
-              cur.futureCalcEvent = ev;
-          }
+    fx = dx * springForce;
+    fy = dy * springForce;
 
-          if(!cur.lastCalcEvent || recalc) {
-              calcData.velocity = Utils.getVelocity(deltaTime, deltaX, deltaY);
-              calcData.angle = Utils.getAngle(center, ev.center);
-              calcData.direction = Utils.getDirection(center, ev.center);
+    node1.fx += fx;
+    node1.fy += fy;
+    node2.fx -= fx;
+    node2.fy -= fy;
+  };
 
-              cur.lastCalcEvent = cur.futureCalcEvent || ev;
-              cur.futureCalcEvent = ev;
-          }
 
-          ev.velocityX = calcData.velocity.x;
-          ev.velocityY = calcData.velocity.y;
-          ev.interimAngle = calcData.angle;
-          ev.interimDirection = calcData.direction;
-      },
+  exports._cleanupPhysicsConfiguration = function() {
+    if (this.physicsConfiguration !== undefined) {
+      while (this.physicsConfiguration.hasChildNodes()) {
+        this.physicsConfiguration.removeChild(this.physicsConfiguration.firstChild);
+      }
 
-      /**
-       * extend eventData for Hammer.gestures
-       * @method extendEventData
-       * @param {Object} ev
-       * @return {Object} ev
-       */
-      extendEventData: function extendEventData(ev) {
-          var cur = this.current,
-              startEv = cur.startEvent,
-              lastEv = cur.lastEvent || startEv;
+      this.physicsConfiguration.parentNode.removeChild(this.physicsConfiguration);
+      this.physicsConfiguration = undefined;
+    }
+  }
 
-          // update the start touchlist to calculate the scale/rotation
-          if(ev.eventType == EVENT_TOUCH || ev.eventType == EVENT_RELEASE) {
-              startEv.touches = [];
-              Utils.each(ev.touches, function(touch) {
-                  startEv.touches.push({
-                      clientX: touch.clientX,
-                      clientY: touch.clientY
-                  });
-              });
-          }
+  /**
+   * Load the HTML for the physics config and bind it
+   * @private
+   */
+  exports._loadPhysicsConfiguration = function () {
+    if (this.physicsConfiguration === undefined) {
+      this.backupConstants = {};
+      util.deepExtend(this.backupConstants,this.constants);
 
-          var deltaTime = ev.timeStamp - startEv.timeStamp,
-              deltaX = ev.center.clientX - startEv.center.clientX,
-              deltaY = ev.center.clientY - startEv.center.clientY;
+      var maxGravitational = Math.max(20000, (-1 * this.constants.physics.barnesHut.gravitationalConstant) * 10);
+      var maxSpring = Math.min(0.05, this.constants.physics.barnesHut.springConstant * 10)
 
-          this.getCalculatedData(ev, lastEv.center, deltaTime, deltaX, deltaY);
+      var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
+      this.physicsConfiguration = document.createElement('div');
+      this.physicsConfiguration.className = "PhysicsConfiguration";
+      this.physicsConfiguration.innerHTML = '' +
+        '<table><tr><td><b>Simulation Mode:</b></td></tr>' +
+        '<tr>' +
+        '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod1" value="BH" checked="checked">Barnes Hut</td>' +
+        '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod2" value="R">Repulsion</td>' +
+        '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod3" value="H">Hierarchical</td>' +
+        '</tr>' +
+        '</table>' +
+        '<table id="graph_BH_table" style="display:none">' +
+        '<tr><td><b>Barnes Hut</b></td></tr>' +
+        '<tr>' +
+        '<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="0" max="'+maxGravitational+'" value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" step="25" style="width:300px" id="graph_BH_gc"></td><td  width="50px">-'+maxGravitational+'</td><td><input value="' + (this.constants.physics.barnesHut.gravitationalConstant) + '" id="graph_BH_gc_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="6"  value="' + this.constants.physics.barnesHut.centralGravity + '" step="0.05"  style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this.constants.physics.barnesHut.centralGravity + '" id="graph_BH_cg_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.barnesHut.springLength + '" step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="' + this.constants.physics.barnesHut.springLength + '" id="graph_BH_sl_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="'+maxSpring+'" value="' + this.constants.physics.barnesHut.springConstant + '" step="0.0001" style="width:300px" id="graph_BH_sc"></td><td>'+maxSpring+'</td><td><input value="' + this.constants.physics.barnesHut.springConstant + '" id="graph_BH_sc_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.barnesHut.damping + '" step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.barnesHut.damping + '" id="graph_BH_damp_value" style="width:60px"></td>' +
+        '</tr>' +
+        '</table>' +
+        '<table id="graph_R_table" style="display:none">' +
+        '<tr><td><b>Repulsion</b></td></tr>' +
+        '<tr>' +
+        '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.repulsion.nodeDistance + '" step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.repulsion.nodeDistance + '" id="graph_R_nd_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3"  value="' + this.constants.physics.repulsion.centralGravity + '" step="0.05"  style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="' + this.constants.physics.repulsion.centralGravity + '" id="graph_R_cg_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.repulsion.springLength + '" step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="' + this.constants.physics.repulsion.springLength + '" id="graph_R_sl_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.repulsion.springConstant + '" step="0.001" style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.repulsion.springConstant + '" id="graph_R_sc_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.repulsion.damping + '" step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.repulsion.damping + '" id="graph_R_damp_value" style="width:60px"></td>' +
+        '</tr>' +
+        '</table>' +
+        '<table id="graph_H_table" style="display:none">' +
+        '<tr><td width="150"><b>Hierarchical</b></td></tr>' +
+        '<tr>' +
+        '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" id="graph_H_nd_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3"  value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" step="0.05"  style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" id="graph_H_cg_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" id="graph_H_sl_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" step="0.001" style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" id="graph_H_sc_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.hierarchicalRepulsion.damping + '" step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.damping + '" id="graph_H_damp_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="' + hierarchicalLayoutDirections.indexOf(this.constants.hierarchicalLayout.direction) + '" step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="' + this.constants.hierarchicalLayout.direction + '" id="graph_H_direction_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.levelSeparation + '" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.levelSeparation + '" id="graph_H_levsep_value" style="width:60px"></td>' +
+        '</tr>' +
+        '<tr>' +
+        '<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.nodeSpacing + '" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.nodeSpacing + '" id="graph_H_nspac_value" style="width:60px"></td>' +
+        '</tr>' +
+        '</table>' +
+        '<table><tr><td><b>Options:</b></td></tr>' +
+        '<tr>' +
+        '<td width="180px"><input type="button" id="graph_toggleSmooth" value="Toggle smoothCurves" style="width:150px"></td>' +
+        '<td width="180px"><input type="button" id="graph_repositionNodes" value="Reinitialize" style="width:150px"></td>' +
+        '<td width="180px"><input type="button" id="graph_generateOptions" value="Generate Options" style="width:150px"></td>' +
+        '</tr>' +
+        '</table>'
+      this.containerElement.parentElement.insertBefore(this.physicsConfiguration, this.containerElement);
+      this.optionsDiv = document.createElement("div");
+      this.optionsDiv.style.fontSize = "14px";
+      this.optionsDiv.style.fontFamily = "verdana";
+      this.containerElement.parentElement.insertBefore(this.optionsDiv, this.containerElement);
 
-          Utils.extend(ev, {
-              startEvent: startEv,
+      var rangeElement;
+      rangeElement = document.getElementById('graph_BH_gc');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_gc', -1, "physics_barnesHut_gravitationalConstant");
+      rangeElement = document.getElementById('graph_BH_cg');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_cg', 1, "physics_centralGravity");
+      rangeElement = document.getElementById('graph_BH_sc');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sc', 1, "physics_springConstant");
+      rangeElement = document.getElementById('graph_BH_sl');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sl', 1, "physics_springLength");
+      rangeElement = document.getElementById('graph_BH_damp');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_damp', 1, "physics_damping");
 
-              deltaTime: deltaTime,
-              deltaX: deltaX,
-              deltaY: deltaY,
+      rangeElement = document.getElementById('graph_R_nd');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_nd', 1, "physics_repulsion_nodeDistance");
+      rangeElement = document.getElementById('graph_R_cg');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_cg', 1, "physics_centralGravity");
+      rangeElement = document.getElementById('graph_R_sc');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sc', 1, "physics_springConstant");
+      rangeElement = document.getElementById('graph_R_sl');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sl', 1, "physics_springLength");
+      rangeElement = document.getElementById('graph_R_damp');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_damp', 1, "physics_damping");
 
-              distance: Utils.getDistance(startEv.center, ev.center),
-              angle: Utils.getAngle(startEv.center, ev.center),
-              direction: Utils.getDirection(startEv.center, ev.center),
-              scale: Utils.getScale(startEv.touches, ev.touches),
-              rotation: Utils.getRotation(startEv.touches, ev.touches)
-          });
+      rangeElement = document.getElementById('graph_H_nd');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
+      rangeElement = document.getElementById('graph_H_cg');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_cg', 1, "physics_centralGravity");
+      rangeElement = document.getElementById('graph_H_sc');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sc', 1, "physics_springConstant");
+      rangeElement = document.getElementById('graph_H_sl');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sl', 1, "physics_springLength");
+      rangeElement = document.getElementById('graph_H_damp');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_damp', 1, "physics_damping");
+      rangeElement = document.getElementById('graph_H_direction');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_direction', hierarchicalLayoutDirections, "hierarchicalLayout_direction");
+      rangeElement = document.getElementById('graph_H_levsep');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_levsep', 1, "hierarchicalLayout_levelSeparation");
+      rangeElement = document.getElementById('graph_H_nspac');
+      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nspac', 1, "hierarchicalLayout_nodeSpacing");
 
-          return ev;
-      },
+      var radioButton1 = document.getElementById("graph_physicsMethod1");
+      var radioButton2 = document.getElementById("graph_physicsMethod2");
+      var radioButton3 = document.getElementById("graph_physicsMethod3");
+      radioButton2.checked = true;
+      if (this.constants.physics.barnesHut.enabled) {
+        radioButton1.checked = true;
+      }
+      if (this.constants.hierarchicalLayout.enabled) {
+        radioButton3.checked = true;
+      }
 
-      /**
-       * register new gesture
-       * @method register
-       * @param {Object} gesture object, see `gestures/` for documentation
-       * @return {Array} gestures
-       */
-      register: function register(gesture) {
-          // add an enable gesture options if there is no given
-          var options = gesture.defaults || {};
-          if(options[gesture.name] === undefined) {
-              options[gesture.name] = true;
-          }
+      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
+      var graph_generateOptions = document.getElementById("graph_generateOptions");
 
-          // extend Hammer default options with the Hammer.gesture options
-          Utils.extend(Hammer.defaults, options, true);
+      graph_toggleSmooth.onclick = graphToggleSmoothCurves.bind(this);
+      graph_repositionNodes.onclick = graphRepositionNodes.bind(this);
+      graph_generateOptions.onclick = graphGenerateOptions.bind(this);
+      if (this.constants.smoothCurves == true && this.constants.dynamicSmoothCurves == false) {
+        graph_toggleSmooth.style.background = "#A4FF56";
+      }
+      else {
+        graph_toggleSmooth.style.background = "#FF8532";
+      }
 
-          // set its index
-          gesture.index = gesture.index || 1000;
 
-          // add Hammer.gesture to the list
-          this.gestures.push(gesture);
+      switchConfigurations.apply(this);
 
-          // sort the list by index
-          this.gestures.sort(function(a, b) {
-              if(a.index < b.index) {
-                  return -1;
-              }
-              if(a.index > b.index) {
-                  return 1;
-              }
-              return 0;
-          });
+      radioButton1.onchange = switchConfigurations.bind(this);
+      radioButton2.onchange = switchConfigurations.bind(this);
+      radioButton3.onchange = switchConfigurations.bind(this);
+    }
+  };
 
-          return this.gestures;
-      }
+  /**
+   * This overwrites the this.constants.
+   *
+   * @param constantsVariableName
+   * @param value
+   * @private
+   */
+  exports._overWriteGraphConstants = function (constantsVariableName, value) {
+    var nameArray = constantsVariableName.split("_");
+    if (nameArray.length == 1) {
+      this.constants[nameArray[0]] = value;
+    }
+    else if (nameArray.length == 2) {
+      this.constants[nameArray[0]][nameArray[1]] = value;
+    }
+    else if (nameArray.length == 3) {
+      this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
+    }
   };
 
 
   /**
-   * @module hammer
+   * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
    */
+  function graphToggleSmoothCurves () {
+    this.constants.smoothCurves.enabled = !this.constants.smoothCurves.enabled;
+    var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+    if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
+    else                                     {graph_toggleSmooth.style.background = "#FF8532";}
+
+    this._configureSmoothCurves(false);
+  }
 
   /**
-   * create new hammer instance
-   * all methods should return the instance itself, so it is chainable.
+   * this function is used to scramble the nodes
    *
-   * @class Instance
-   * @constructor
-   * @param {HTMLElement} element
-   * @param {Object} [options={}] options are merged with `Hammer.defaults`
-   * @return {Hammer.Instance}
    */
-  Hammer.Instance = function(element, options) {
-      var self = this;
-
-      // setup HammerJS window events and register all gestures
-      // this also sets up the default options
-      setup();
-
-      /**
-       * @property element
-       * @type {HTMLElement}
-       */
-      this.element = element;
-
-      /**
-       * @property enabled
-       * @type {Boolean}
-       * @protected
-       */
-      this.enabled = true;
-
-      /**
-       * options, merged with the defaults
-       * options with an _ are converted to camelCase
-       * @property options
-       * @type {Object}
-       */
-      Utils.each(options, function(value, name) {
-          delete options[name];
-          options[Utils.toCamelCase(name)] = value;
-      });
-
-      this.options = Utils.extend(Utils.extend({}, Hammer.defaults), options || {});
-
-      // add some css to the element to prevent the browser from doing its native behavoir
-      if(this.options.behavior) {
-          Utils.toggleBehavior(this.element, this.options.behavior, true);
+  function graphRepositionNodes () {
+    for (var nodeId in this.calculationNodes) {
+      if (this.calculationNodes.hasOwnProperty(nodeId)) {
+        this.calculationNodes[nodeId].vx = 0;  this.calculationNodes[nodeId].vy = 0;
+        this.calculationNodes[nodeId].fx = 0;  this.calculationNodes[nodeId].fy = 0;
       }
+    }
+    if (this.constants.hierarchicalLayout.enabled == true) {
+      this._setupHierarchicalLayout();
+      showValueOfRange.call(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
+      showValueOfRange.call(this, 'graph_H_cg', 1, "physics_centralGravity");
+      showValueOfRange.call(this, 'graph_H_sc', 1, "physics_springConstant");
+      showValueOfRange.call(this, 'graph_H_sl', 1, "physics_springLength");
+      showValueOfRange.call(this, 'graph_H_damp', 1, "physics_damping");
+    }
+    else {
+      this.repositionNodes();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-      /**
-       * event start handler on the element to start the detection
-       * @property eventStartHandler
-       * @type {Object}
-       */
-      this.eventStartHandler = Event.onTouch(element, EVENT_START, function(ev) {
-          if(self.enabled && ev.eventType == EVENT_START) {
-              Detection.startDetect(self, ev);
-          } else if(ev.eventType == EVENT_TOUCH) {
-              Detection.detect(ev);
+  /**
+   *  this is used to generate an options file from the playing with physics system.
+   */
+  function graphGenerateOptions () {
+    var options = "No options are required, default values used.";
+    var optionsSpecific = [];
+    var radioButton1 = document.getElementById("graph_physicsMethod1");
+    var radioButton2 = document.getElementById("graph_physicsMethod2");
+    if (radioButton1.checked == true) {
+      if (this.constants.physics.barnesHut.gravitationalConstant != this.backupConstants.physics.barnesHut.gravitationalConstant) {optionsSpecific.push("gravitationalConstant: " + this.constants.physics.barnesHut.gravitationalConstant);}
+      if (this.constants.physics.centralGravity != this.backupConstants.physics.barnesHut.centralGravity)                         {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
+      if (this.constants.physics.springLength != this.backupConstants.physics.barnesHut.springLength)                             {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
+      if (this.constants.physics.springConstant != this.backupConstants.physics.barnesHut.springConstant)                         {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
+      if (this.constants.physics.damping != this.backupConstants.physics.barnesHut.damping)                                       {optionsSpecific.push("damping: " + this.constants.physics.damping);}
+      if (optionsSpecific.length != 0) {
+        options = "var options = {";
+        options += "physics: {barnesHut: {";
+        for (var i = 0; i < optionsSpecific.length; i++) {
+          options += optionsSpecific[i];
+          if (i < optionsSpecific.length - 1) {
+            options += ", "
           }
-      });
+        }
+        options += '}}'
+      }
+      if (this.constants.smoothCurves.enabled != this.backupConstants.smoothCurves.enabled) {
+        if (optionsSpecific.length == 0) {options = "var options = {";}
+        else {options += ", "}
+        options += "smoothCurves: " + this.constants.smoothCurves.enabled;
+      }
+      if (options != "No options are required, default values used.") {
+        options += '};'
+      }
+    }
+    else if (radioButton2.checked == true) {
+      options = "var options = {";
+      options += "physics: {barnesHut: {enabled: false}";
+      if (this.constants.physics.repulsion.nodeDistance != this.backupConstants.physics.repulsion.nodeDistance)  {optionsSpecific.push("nodeDistance: " + this.constants.physics.repulsion.nodeDistance);}
+      if (this.constants.physics.centralGravity != this.backupConstants.physics.repulsion.centralGravity)        {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
+      if (this.constants.physics.springLength != this.backupConstants.physics.repulsion.springLength)            {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
+      if (this.constants.physics.springConstant != this.backupConstants.physics.repulsion.springConstant)        {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
+      if (this.constants.physics.damping != this.backupConstants.physics.repulsion.damping)                      {optionsSpecific.push("damping: " + this.constants.physics.damping);}
+      if (optionsSpecific.length != 0) {
+        options += ", repulsion: {";
+        for (var i = 0; i < optionsSpecific.length; i++) {
+          options += optionsSpecific[i];
+          if (i < optionsSpecific.length - 1) {
+            options += ", "
+          }
+        }
+        options += '}}'
+      }
+      if (optionsSpecific.length == 0) {options += "}"}
+      if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
+        options += ", smoothCurves: " + this.constants.smoothCurves;
+      }
+      options += '};'
+    }
+    else {
+      options = "var options = {";
+      if (this.constants.physics.hierarchicalRepulsion.nodeDistance != this.backupConstants.physics.hierarchicalRepulsion.nodeDistance)  {optionsSpecific.push("nodeDistance: " + this.constants.physics.hierarchicalRepulsion.nodeDistance);}
+      if (this.constants.physics.centralGravity != this.backupConstants.physics.hierarchicalRepulsion.centralGravity)        {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
+      if (this.constants.physics.springLength != this.backupConstants.physics.hierarchicalRepulsion.springLength)            {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
+      if (this.constants.physics.springConstant != this.backupConstants.physics.hierarchicalRepulsion.springConstant)        {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
+      if (this.constants.physics.damping != this.backupConstants.physics.hierarchicalRepulsion.damping)                      {optionsSpecific.push("damping: " + this.constants.physics.damping);}
+      if (optionsSpecific.length != 0) {
+        options += "physics: {hierarchicalRepulsion: {";
+        for (var i = 0; i < optionsSpecific.length; i++) {
+          options += optionsSpecific[i];
+          if (i < optionsSpecific.length - 1) {
+            options += ", ";
+          }
+        }
+        options += '}},';
+      }
+      options += 'hierarchicalLayout: {';
+      optionsSpecific = [];
+      if (this.constants.hierarchicalLayout.direction != this.backupConstants.hierarchicalLayout.direction)                       {optionsSpecific.push("direction: " + this.constants.hierarchicalLayout.direction);}
+      if (Math.abs(this.constants.hierarchicalLayout.levelSeparation) != this.backupConstants.hierarchicalLayout.levelSeparation) {optionsSpecific.push("levelSeparation: " + this.constants.hierarchicalLayout.levelSeparation);}
+      if (this.constants.hierarchicalLayout.nodeSpacing != this.backupConstants.hierarchicalLayout.nodeSpacing)                   {optionsSpecific.push("nodeSpacing: " + this.constants.hierarchicalLayout.nodeSpacing);}
+      if (optionsSpecific.length != 0) {
+        for (var i = 0; i < optionsSpecific.length; i++) {
+          options += optionsSpecific[i];
+          if (i < optionsSpecific.length - 1) {
+            options += ", "
+          }
+        }
+        options += '}'
+      }
+      else {
+        options += "enabled:true}";
+      }
+      options += '};'
+    }
 
-      /**
-       * keep a list of user event handlers which needs to be removed when calling 'dispose'
-       * @property eventHandlers
-       * @type {Array}
-       */
-      this.eventHandlers = [];
-  };
 
-  Hammer.Instance.prototype = {
-      /**
-       * bind events to the instance
-       * @method on
-       * @chainable
-       * @param {String} gestures multiple gestures by splitting with a space
-       * @param {Function} handler
-       * @param {Object} handler.ev event object
-       */
-      on: function onEvent(gestures, handler) {
-          var self = this;
-          Event.on(self.element, gestures, handler, function(type) {
-              self.eventHandlers.push({ gesture: type, handler: handler });
-          });
-          return self;
-      },
+    this.optionsDiv.innerHTML = options;
+  }
 
-      /**
-       * unbind events to the instance
-       * @method off
-       * @chainable
-       * @param {String} gestures
-       * @param {Function} handler
-       */
-      off: function offEvent(gestures, handler) {
-          var self = this;
+  /**
+   * this is used to switch between barnesHut, repulsion and hierarchical.
+   *
+   */
+  function switchConfigurations () {
+    var ids = ["graph_BH_table", "graph_R_table", "graph_H_table"];
+    var radioButton = document.querySelector('input[name="graph_physicsMethod"]:checked').value;
+    var tableId = "graph_" + radioButton + "_table";
+    var table = document.getElementById(tableId);
+    table.style.display = "block";
+    for (var i = 0; i < ids.length; i++) {
+      if (ids[i] != tableId) {
+        table = document.getElementById(ids[i]);
+        table.style.display = "none";
+      }
+    }
+    this._restoreNodes();
+    if (radioButton == "R") {
+      this.constants.hierarchicalLayout.enabled = false;
+      this.constants.physics.hierarchicalRepulsion.enabled = false;
+      this.constants.physics.barnesHut.enabled = false;
+    }
+    else if (radioButton == "H") {
+      if (this.constants.hierarchicalLayout.enabled == false) {
+        this.constants.hierarchicalLayout.enabled = true;
+        this.constants.physics.hierarchicalRepulsion.enabled = true;
+        this.constants.physics.barnesHut.enabled = false;
+        this.constants.smoothCurves.enabled = false;
+        this._setupHierarchicalLayout();
+      }
+    }
+    else {
+      this.constants.hierarchicalLayout.enabled = false;
+      this.constants.physics.hierarchicalRepulsion.enabled = false;
+      this.constants.physics.barnesHut.enabled = true;
+    }
+    this._loadSelectedForceSolver();
+    var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
+    if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
+    else                                     {graph_toggleSmooth.style.background = "#FF8532";}
+    this.moving = true;
+    this.start();
+  }
 
-          Event.off(self.element, gestures, handler, function(type) {
-              var index = Utils.inArray({ gesture: type, handler: handler });
-              if(index !== false) {
-                  self.eventHandlers.splice(index, 1);
-              }
-          });
-          return self;
-      },
 
-      /**
-       * trigger gesture event
-       * @method trigger
-       * @chainable
-       * @param {String} gesture
-       * @param {Object} [eventData]
-       */
-      trigger: function triggerEvent(gesture, eventData) {
-          // optional
-          if(!eventData) {
-              eventData = {};
-          }
+  /**
+   * this generates the ranges depending on the iniital values.
+   *
+   * @param id
+   * @param map
+   * @param constantsVariableName
+   */
+  function showValueOfRange (id,map,constantsVariableName) {
+    var valueId = id + "_value";
+    var rangeValue = document.getElementById(id).value;
 
-          // create DOM event
-          var event = Hammer.DOCUMENT.createEvent('Event');
-          event.initEvent(gesture, true, true);
-          event.gesture = eventData;
+    if (Array.isArray(map)) {
+      document.getElementById(valueId).value = map[parseInt(rangeValue)];
+      this._overWriteGraphConstants(constantsVariableName,map[parseInt(rangeValue)]);
+    }
+    else {
+      document.getElementById(valueId).value = parseInt(map) * parseFloat(rangeValue);
+      this._overWriteGraphConstants(constantsVariableName, parseInt(map) * parseFloat(rangeValue));
+    }
 
-          // trigger on the target if it is in the instance element,
-          // this is for event delegation tricks
-          var element = this.element;
-          if(Utils.hasParent(eventData.target, element)) {
-              element = eventData.target;
-          }
+    if (constantsVariableName == "hierarchicalLayout_direction" ||
+      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
+      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
+      this._setupHierarchicalLayout();
+    }
+    this.moving = true;
+    this.start();
+  }
 
-          element.dispatchEvent(event);
-          return this;
-      },
 
-      /**
-       * enable of disable hammer.js detection
-       * @method enable
-       * @chainable
-       * @param {Boolean} state
-       */
-      enable: function enable(state) {
-          this.enabled = state;
-          return this;
-      },
 
-      /**
-       * dispose this hammer instance
-       * @method dispose
-       * @return {Null}
-       */
-      dispose: function dispose() {
-          var i, eh;
 
-          // undo all changes made by stop_browser_behavior
-          Utils.toggleBehavior(this.element, this.options.behavior, false);
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
 
-          // unbind all custom event handlers
-          for(i = -1; (eh = this.eventHandlers[++i]);) {
-              Utils.off(this.element, eh.gesture, eh.handler);
-          }
+  var __WEBPACK_AMD_DEFINE_RESULT__;/*! Hammer.JS - v1.1.3 - 2014-05-20
+   * http://eightmedia.github.io/hammer.js
+   *
+   * Copyright (c) 2014 Jorik Tangelder <j.tangelder@gmail.com>;
+   * Licensed under the MIT license */
 
-          this.eventHandlers = [];
+  (function(window, undefined) {
+    'use strict';
 
-          // unbind the start event listener
-          Event.off(this.element, EVENT_TYPES[EVENT_START], this.eventStartHandler);
+  /**
+   * @main
+   * @module hammer
+   *
+   * @class Hammer
+   * @static
+   */
 
-          return null;
-      }
+  /**
+   * Hammer, use this to create instances
+   * ````
+   * var hammertime = new Hammer(myElement);
+   * ````
+   *
+   * @method Hammer
+   * @param {HTMLElement} element
+   * @param {Object} [options={}]
+   * @return {Hammer.Instance}
+   */
+  var Hammer = function Hammer(element, options) {
+      return new Hammer.Instance(element, options || {});
   };
 
-
   /**
-   * @module gestures
+   * version, as defined in package.json
+   * the value will be set at each build
+   * @property VERSION
+   * @final
+   * @type {String}
    */
+  Hammer.VERSION = '1.1.3';
+
   /**
-   * Move with x fingers (default 1) around on the page.
-   * Preventing the default browser behavior is a good way to improve feel and working.
+   * default settings.
+   * more settings are defined per gesture at `/gestures`. Each gesture can be disabled/enabled
+   * by setting it's name (like `swipe`) to false.
+   * You can set the defaults for all instances by changing this object before creating an instance.
+   * @example
    * ````
-   *  hammertime.on("drag", function(ev) {
-   *    console.log(ev);
-   *    ev.gesture.preventDefault();
-   *  });
+   *  Hammer.defaults.drag = false;
+   *  Hammer.defaults.behavior.touchAction = 'pan-y';
+   *  delete Hammer.defaults.behavior.userSelect;
    * ````
-   *
-   * @class Drag
-   * @static
+   * @property defaults
+   * @type {Object}
    */
+  Hammer.defaults = {
+      /**
+       * this setting object adds styles and attributes to the element to prevent the browser from doing
+       * its native behavior. The css properties are auto prefixed for the browsers when needed.
+       * @property defaults.behavior
+       * @type {Object}
+       */
+      behavior: {
+          /**
+           * Disables text selection to improve the dragging gesture. When the value is `none` it also sets
+           * `onselectstart=false` for IE on the element. Mainly for desktop browsers.
+           * @property defaults.behavior.userSelect
+           * @type {String}
+           * @default 'none'
+           */
+          userSelect: 'none',
+
+          /**
+           * Specifies whether and how a given region can be manipulated by the user (for instance, by panning or zooming).
+           * Used by Chrome 35> and IE10>. By default this makes the element blocking any touch event.
+           * @property defaults.behavior.touchAction
+           * @type {String}
+           * @default: 'pan-y'
+           */
+          touchAction: 'pan-y',
+
+          /**
+           * Disables the default callout shown when you touch and hold a touch target.
+           * On iOS, when you touch and hold a touch target such as a link, Safari displays
+           * a callout containing information about the link. This property allows you to disable that callout.
+           * @property defaults.behavior.touchCallout
+           * @type {String}
+           * @default 'none'
+           */
+          touchCallout: 'none',
+
+          /**
+           * Specifies whether zooming is enabled. Used by IE10>
+           * @property defaults.behavior.contentZooming
+           * @type {String}
+           * @default 'none'
+           */
+          contentZooming: 'none',
+
+          /**
+           * Specifies that an entire element should be draggable instead of its contents.
+           * Mainly for desktop browsers.
+           * @property defaults.behavior.userDrag
+           * @type {String}
+           * @default 'none'
+           */
+          userDrag: 'none',
+
+          /**
+           * Overrides the highlight color shown when the user taps a link or a JavaScript
+           * clickable element in Safari on iPhone. This property obeys the alpha value, if specified.
+           *
+           * If you don't specify an alpha value, Safari on iPhone applies a default alpha value
+           * to the color. To disable tap highlighting, set the alpha value to 0 (invisible).
+           * If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.
+           * @property defaults.behavior.tapHighlightColor
+           * @type {String}
+           * @default 'rgba(0,0,0,0)'
+           */
+          tapHighlightColor: 'rgba(0,0,0,0)'
+      }
+  };
+
   /**
-   * @event drag
-   * @param {Object} ev
+   * hammer document where the base events are added at
+   * @property DOCUMENT
+   * @type {HTMLElement}
+   * @default window.document
    */
+  Hammer.DOCUMENT = document;
+
   /**
-   * @event dragstart
-   * @param {Object} ev
+   * detect support for pointer events
+   * @property HAS_POINTEREVENTS
+   * @type {Boolean}
    */
+  Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
+
   /**
-   * @event dragend
-   * @param {Object} ev
+   * detect support for touch events
+   * @property HAS_TOUCHEVENTS
+   * @type {Boolean}
    */
+  Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
+
   /**
-   * @event drapleft
-   * @param {Object} ev
+   * detect mobile browsers
+   * @property IS_MOBILE
+   * @type {Boolean}
    */
+  Hammer.IS_MOBILE = /mobile|tablet|ip(ad|hone|od)|android|silk/i.test(navigator.userAgent);
+
   /**
-   * @event dragright
-   * @param {Object} ev
+   * detect if we want to support mouseevents at all
+   * @property NO_MOUSEEVENTS
+   * @type {Boolean}
    */
+  Hammer.NO_MOUSEEVENTS = (Hammer.HAS_TOUCHEVENTS && Hammer.IS_MOBILE) || Hammer.HAS_POINTEREVENTS;
+
   /**
-   * @event dragup
-   * @param {Object} ev
+   * interval in which Hammer recalculates current velocity/direction/angle in ms
+   * @property CALCULATE_INTERVAL
+   * @type {Number}
+   * @default 25
    */
+  Hammer.CALCULATE_INTERVAL = 25;
+
   /**
-   * @event dragdown
-   * @param {Object} ev
+   * eventtypes per touchevent (start, move, end) are filled by `Event.determineEventTypes` on `setup`
+   * the object contains the DOM event names per type (`EVENT_START`, `EVENT_MOVE`, `EVENT_END`)
+   * @property EVENT_TYPES
+   * @private
+   * @writeOnce
+   * @type {Object}
    */
+  var EVENT_TYPES = {};
 
   /**
-   * @param {String} name
+   * direction strings, for safe comparisons
+   * @property DIRECTION_DOWN|LEFT|UP|RIGHT
+   * @final
+   * @type {String}
+   * @default 'down' 'left' 'up' 'right'
    */
-  (function(name) {
-      var triggered = false;
+  var DIRECTION_DOWN = Hammer.DIRECTION_DOWN = 'down';
+  var DIRECTION_LEFT = Hammer.DIRECTION_LEFT = 'left';
+  var DIRECTION_UP = Hammer.DIRECTION_UP = 'up';
+  var DIRECTION_RIGHT = Hammer.DIRECTION_RIGHT = 'right';
 
-      function dragGesture(ev, inst) {
-          var cur = Detection.current;
+  /**
+   * pointertype strings, for safe comparisons
+   * @property POINTER_MOUSE|TOUCH|PEN
+   * @final
+   * @type {String}
+   * @default 'mouse' 'touch' 'pen'
+   */
+  var POINTER_MOUSE = Hammer.POINTER_MOUSE = 'mouse';
+  var POINTER_TOUCH = Hammer.POINTER_TOUCH = 'touch';
+  var POINTER_PEN = Hammer.POINTER_PEN = 'pen';
 
-          // max touches
-          if(inst.options.dragMaxTouches > 0 &&
-              ev.touches.length > inst.options.dragMaxTouches) {
-              return;
-          }
+  /**
+   * eventtypes
+   * @property EVENT_START|MOVE|END|RELEASE|TOUCH
+   * @final
+   * @type {String}
+   * @default 'start' 'change' 'move' 'end' 'release' 'touch'
+   */
+  var EVENT_START = Hammer.EVENT_START = 'start';
+  var EVENT_MOVE = Hammer.EVENT_MOVE = 'move';
+  var EVENT_END = Hammer.EVENT_END = 'end';
+  var EVENT_RELEASE = Hammer.EVENT_RELEASE = 'release';
+  var EVENT_TOUCH = Hammer.EVENT_TOUCH = 'touch';
 
-          switch(ev.eventType) {
-              case EVENT_START:
-                  triggered = false;
-                  break;
+  /**
+   * if the window events are set...
+   * @property READY
+   * @writeOnce
+   * @type {Boolean}
+   * @default false
+   */
+  Hammer.READY = false;
 
-              case EVENT_MOVE:
-                  // when the distance we moved is too small we skip this gesture
-                  // or we can be already in dragging
-                  if(ev.distance < inst.options.dragMinDistance &&
-                      cur.name != name) {
-                      return;
-                  }
+  /**
+   * plugins namespace
+   * @property plugins
+   * @type {Object}
+   */
+  Hammer.plugins = Hammer.plugins || {};
 
-                  var startCenter = cur.startEvent.center;
+  /**
+   * gestures namespace
+   * see `/gestures` for the definitions
+   * @property gestures
+   * @type {Object}
+   */
+  Hammer.gestures = Hammer.gestures || {};
 
-                  // we are dragging!
-                  if(cur.name != name) {
-                      cur.name = name;
-                      if(inst.options.dragDistanceCorrection && ev.distance > 0) {
-                          // When a drag is triggered, set the event center to dragMinDistance pixels from the original event center.
-                          // Without this correction, the dragged distance would jumpstart at dragMinDistance pixels instead of at 0.
-                          // It might be useful to save the original start point somewhere
-                          var factor = Math.abs(inst.options.dragMinDistance / ev.distance);
-                          startCenter.pageX += ev.deltaX * factor;
-                          startCenter.pageY += ev.deltaY * factor;
-                          startCenter.clientX += ev.deltaX * factor;
-                          startCenter.clientY += ev.deltaY * factor;
+  /**
+   * setup events to detect gestures on the document
+   * this function is called when creating an new instance
+   * @private
+   */
+  function setup() {
+      if(Hammer.READY) {
+          return;
+      }
 
-                          // recalculate event data using new start point
-                          ev = Detection.extendEventData(ev);
-                      }
-                  }
+      // find what eventtypes we add listeners to
+      Event.determineEventTypes();
 
-                  // lock drag to axis?
-                  if(cur.lastEvent.dragLockToAxis ||
-                      ( inst.options.dragLockToAxis &&
-                          inst.options.dragLockMinDistance <= ev.distance
-                          )) {
-                      ev.dragLockToAxis = true;
-                  }
+      // Register all gestures inside Hammer.gestures
+      Utils.each(Hammer.gestures, function(gesture) {
+          Detection.register(gesture);
+      });
 
-                  // keep direction on the axis that the drag gesture started on
-                  var lastDirection = cur.lastEvent.direction;
-                  if(ev.dragLockToAxis && lastDirection !== ev.direction) {
-                      if(Utils.isVertical(lastDirection)) {
-                          ev.direction = (ev.deltaY < 0) ? DIRECTION_UP : DIRECTION_DOWN;
-                      } else {
-                          ev.direction = (ev.deltaX < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
-                      }
-                  }
+      // Add touch events on the document
+      Event.onTouch(Hammer.DOCUMENT, EVENT_MOVE, Detection.detect);
+      Event.onTouch(Hammer.DOCUMENT, EVENT_END, Detection.detect);
 
-                  // first time, trigger dragstart event
-                  if(!triggered) {
-                      inst.trigger(name + 'start', ev);
-                      triggered = true;
-                  }
+      // Hammer is ready...!
+      Hammer.READY = true;
+  }
 
-                  // trigger events
-                  inst.trigger(name, ev);
-                  inst.trigger(name + ev.direction, ev);
+  /**
+   * @module hammer
+   *
+   * @class Utils
+   * @static
+   */
+  var Utils = Hammer.utils = {
+      /**
+       * extend method, could also be used for cloning when `dest` is an empty object.
+       * changes the dest object
+       * @method extend
+       * @param {Object} dest
+       * @param {Object} src
+       * @param {Boolean} [merge=false]  do a merge
+       * @return {Object} dest
+       */
+      extend: function extend(dest, src, merge) {
+          for(var key in src) {
+              if(!src.hasOwnProperty(key) || (dest[key] !== undefined && merge)) {
+                  continue;
+              }
+              dest[key] = src[key];
+          }
+          return dest;
+      },
 
-                  var isVertical = Utils.isVertical(ev.direction);
+      /**
+       * simple addEventListener wrapper
+       * @method on
+       * @param {HTMLElement} element
+       * @param {String} type
+       * @param {Function} handler
+       */
+      on: function on(element, type, handler) {
+          element.addEventListener(type, handler, false);
+      },
 
-                  // block the browser events
-                  if((inst.options.dragBlockVertical && isVertical) ||
-                      (inst.options.dragBlockHorizontal && !isVertical)) {
-                      ev.preventDefault();
-                  }
-                  break;
+      /**
+       * simple removeEventListener wrapper
+       * @method off
+       * @param {HTMLElement} element
+       * @param {String} type
+       * @param {Function} handler
+       */
+      off: function off(element, type, handler) {
+          element.removeEventListener(type, handler, false);
+      },
 
-              case EVENT_RELEASE:
-                  if(triggered && ev.changedLength <= inst.options.dragMaxTouches) {
-                      inst.trigger(name + 'end', ev);
-                      triggered = false;
+      /**
+       * forEach over arrays and objects
+       * @method each
+       * @param {Object|Array} obj
+       * @param {Function} iterator
+       * @param {any} iterator.item
+       * @param {Number} iterator.index
+       * @param {Object|Array} iterator.obj the source object
+       * @param {Object} context value to use as `this` in the iterator
+       */
+      each: function each(obj, iterator, context) {
+          var i, len;
+
+          // native forEach on arrays
+          if('forEach' in obj) {
+              obj.forEach(iterator, context);
+          // arrays
+          } else if(obj.length !== undefined) {
+              for(i = 0, len = obj.length; i < len; i++) {
+                  if(iterator.call(context, obj[i], i, obj) === false) {
+                      return;
                   }
-                  break;
+              }
+          // objects
+          } else {
+              for(i in obj) {
+                  if(obj.hasOwnProperty(i) &&
+                      iterator.call(context, obj[i], i, obj) === false) {
+                      return;
+                  }
+              }
+          }
+      },
 
-              case EVENT_END:
-                  triggered = false;
-                  break;
+      /**
+       * find if a string contains the string using indexOf
+       * @method inStr
+       * @param {String} src
+       * @param {String} find
+       * @return {Boolean} found
+       */
+      inStr: function inStr(src, find) {
+          return src.indexOf(find) > -1;
+      },
+
+      /**
+       * find if a array contains the object using indexOf or a simple polyfill
+       * @method inArray
+       * @param {String} src
+       * @param {String} find
+       * @return {Boolean|Number} false when not found, or the index
+       */
+      inArray: function inArray(src, find) {
+          if(src.indexOf) {
+              var index = src.indexOf(find);
+              return (index === -1) ? false : index;
+          } else {
+              for(var i = 0, len = src.length; i < len; i++) {
+                  if(src[i] === find) {
+                      return i;
+                  }
+              }
+              return false;
           }
-      }
+      },
 
-      Hammer.gestures.Drag = {
-          name: name,
-          index: 50,
-          handler: dragGesture,
-          defaults: {
-              /**
-               * minimal movement that have to be made before the drag event gets triggered
-               * @property dragMinDistance
-               * @type {Number}
-               * @default 10
-               */
-              dragMinDistance: 10,
+      /**
+       * convert an array-like object (`arguments`, `touchlist`) to an array
+       * @method toArray
+       * @param {Object} obj
+       * @return {Array}
+       */
+      toArray: function toArray(obj) {
+          return Array.prototype.slice.call(obj, 0);
+      },
 
-              /**
-               * Set dragDistanceCorrection to true to make the starting point of the drag
-               * be calculated from where the drag was triggered, not from where the touch started.
-               * Useful to avoid a jerk-starting drag, which can make fine-adjustments
-               * through dragging difficult, and be visually unappealing.
-               * @property dragDistanceCorrection
-               * @type {Boolean}
-               * @default true
-               */
-              dragDistanceCorrection: true,
+      /**
+       * find if a node is in the given parent
+       * @method hasParent
+       * @param {HTMLElement} node
+       * @param {HTMLElement} parent
+       * @return {Boolean} found
+       */
+      hasParent: function hasParent(node, parent) {
+          while(node) {
+              if(node == parent) {
+                  return true;
+              }
+              node = node.parentNode;
+          }
+          return false;
+      },
 
-              /**
-               * set 0 for unlimited, but this can conflict with transform
-               * @property dragMaxTouches
-               * @type {Number}
-               * @default 1
-               */
-              dragMaxTouches: 1,
+      /**
+       * get the center of all the touches
+       * @method getCenter
+       * @param {Array} touches
+       * @return {Object} center contains `pageX`, `pageY`, `clientX` and `clientY` properties
+       */
+      getCenter: function getCenter(touches) {
+          var pageX = [],
+              pageY = [],
+              clientX = [],
+              clientY = [],
+              min = Math.min,
+              max = Math.max;
 
-              /**
-               * prevent default browser behavior when dragging occurs
-               * be careful with it, it makes the element a blocking element
-               * when you are using the drag gesture, it is a good practice to set this true
-               * @property dragBlockHorizontal
-               * @type {Boolean}
-               * @default false
-               */
-              dragBlockHorizontal: false,
+          // no need to loop when only one touch
+          if(touches.length === 1) {
+              return {
+                  pageX: touches[0].pageX,
+                  pageY: touches[0].pageY,
+                  clientX: touches[0].clientX,
+                  clientY: touches[0].clientY
+              };
+          }
 
-              /**
-               * same as `dragBlockHorizontal`, but for vertical movement
-               * @property dragBlockVertical
-               * @type {Boolean}
-               * @default false
-               */
-              dragBlockVertical: false,
+          Utils.each(touches, function(touch) {
+              pageX.push(touch.pageX);
+              pageY.push(touch.pageY);
+              clientX.push(touch.clientX);
+              clientY.push(touch.clientY);
+          });
 
-              /**
-               * dragLockToAxis keeps the drag gesture on the axis that it started on,
-               * It disallows vertical directions if the initial direction was horizontal, and vice versa.
-               * @property dragLockToAxis
-               * @type {Boolean}
-               * @default false
-               */
-              dragLockToAxis: false,
+          return {
+              pageX: (min.apply(Math, pageX) + max.apply(Math, pageX)) / 2,
+              pageY: (min.apply(Math, pageY) + max.apply(Math, pageY)) / 2,
+              clientX: (min.apply(Math, clientX) + max.apply(Math, clientX)) / 2,
+              clientY: (min.apply(Math, clientY) + max.apply(Math, clientY)) / 2
+          };
+      },
 
-              /**
-               * drag lock only kicks in when distance > dragLockMinDistance
-               * This way, locking occurs only when the distance has become large enough to reliably determine the direction
-               * @property dragLockMinDistance
-               * @type {Number}
-               * @default 25
-               */
-              dragLockMinDistance: 25
+      /**
+       * calculate the velocity between two points. unit is in px per ms.
+       * @method getVelocity
+       * @param {Number} deltaTime
+       * @param {Number} deltaX
+       * @param {Number} deltaY
+       * @return {Object} velocity `x` and `y`
+       */
+      getVelocity: function getVelocity(deltaTime, deltaX, deltaY) {
+          return {
+              x: Math.abs(deltaX / deltaTime) || 0,
+              y: Math.abs(deltaY / deltaTime) || 0
+          };
+      },
+
+      /**
+       * calculate the angle between two coordinates
+       * @method getAngle
+       * @param {Touch} touch1
+       * @param {Touch} touch2
+       * @return {Number} angle
+       */
+      getAngle: function getAngle(touch1, touch2) {
+          var x = touch2.clientX - touch1.clientX,
+              y = touch2.clientY - touch1.clientY;
+
+          return Math.atan2(y, x) * 180 / Math.PI;
+      },
+
+      /**
+       * do a small comparision to get the direction between two touches.
+       * @method getDirection
+       * @param {Touch} touch1
+       * @param {Touch} touch2
+       * @return {String} direction matches `DIRECTION_LEFT|RIGHT|UP|DOWN`
+       */
+      getDirection: function getDirection(touch1, touch2) {
+          var x = Math.abs(touch1.clientX - touch2.clientX),
+              y = Math.abs(touch1.clientY - touch2.clientY);
+
+          if(x >= y) {
+              return touch1.clientX - touch2.clientX > 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
           }
-      };
-  })('drag');
+          return touch1.clientY - touch2.clientY > 0 ? DIRECTION_UP : DIRECTION_DOWN;
+      },
 
-  /**
-   * @module gestures
-   */
-  /**
-   * trigger a simple gesture event, so you can do anything in your handler.
-   * only usable if you know what your doing...
-   *
-   * @class Gesture
-   * @static
-   */
-  /**
-   * @event gesture
-   * @param {Object} ev
-   */
-  Hammer.gestures.Gesture = {
-      name: 'gesture',
-      index: 1337,
-      handler: function releaseGesture(ev, inst) {
-          inst.trigger(this.name, ev);
-      }
-  };
+      /**
+       * calculate the distance between two touches
+       * @method getDistance
+       * @param {Touch}touch1
+       * @param {Touch} touch2
+       * @return {Number} distance
+       */
+      getDistance: function getDistance(touch1, touch2) {
+          var x = touch2.clientX - touch1.clientX,
+              y = touch2.clientY - touch1.clientY;
 
-  /**
-   * @module gestures
-   */
-  /**
-   * Touch stays at the same place for x time
-   *
-   * @class Hold
-   * @static
-   */
-  /**
-   * @event hold
-   * @param {Object} ev
-   */
+          return Math.sqrt((x * x) + (y * y));
+      },
 
-  /**
-   * @param {String} name
-   */
-  (function(name) {
-      var timer;
+      /**
+       * calculate the scale factor between two touchLists
+       * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+       * @method getScale
+       * @param {Array} start array of touches
+       * @param {Array} end array of touches
+       * @return {Number} scale
+       */
+      getScale: function getScale(start, end) {
+          // need two fingers...
+          if(start.length >= 2 && end.length >= 2) {
+              return this.getDistance(end[0], end[1]) / this.getDistance(start[0], start[1]);
+          }
+          return 1;
+      },
 
-      function holdGesture(ev, inst) {
-          var options = inst.options,
-              current = Detection.current;
+      /**
+       * calculate the rotation degrees between two touchLists
+       * @method getRotation
+       * @param {Array} start array of touches
+       * @param {Array} end array of touches
+       * @return {Number} rotation
+       */
+      getRotation: function getRotation(start, end) {
+          // need two fingers
+          if(start.length >= 2 && end.length >= 2) {
+              return this.getAngle(end[1], end[0]) - this.getAngle(start[1], start[0]);
+          }
+          return 0;
+      },
 
-          switch(ev.eventType) {
-              case EVENT_START:
-                  clearTimeout(timer);
+      /**
+       * find out if the direction is vertical   *
+       * @method isVertical
+       * @param {String} direction matches `DIRECTION_UP|DOWN`
+       * @return {Boolean} is_vertical
+       */
+      isVertical: function isVertical(direction) {
+          return direction == DIRECTION_UP || direction == DIRECTION_DOWN;
+      },
 
-                  // set the gesture so we can check in the timeout if it still is
-                  current.name = name;
+      /**
+       * set css properties with their prefixes
+       * @param {HTMLElement} element
+       * @param {String} prop
+       * @param {String} value
+       * @param {Boolean} [toggle=true]
+       * @return {Boolean}
+       */
+      setPrefixedCss: function setPrefixedCss(element, prop, value, toggle) {
+          var prefixes = ['', 'Webkit', 'Moz', 'O', 'ms'];
+          prop = Utils.toCamelCase(prop);
 
-                  // set timer and if after the timeout it still is hold,
-                  // we trigger the hold event
-                  timer = setTimeout(function() {
-                      if(current && current.name == name) {
-                          inst.trigger(name, ev);
-                      }
-                  }, options.holdTimeout);
-                  break;
+          for(var i = 0; i < prefixes.length; i++) {
+              var p = prop;
+              // prefixes
+              if(prefixes[i]) {
+                  p = prefixes[i] + p.slice(0, 1).toUpperCase() + p.slice(1);
+              }
 
-              case EVENT_MOVE:
-                  if(ev.distance > options.holdThreshold) {
-                      clearTimeout(timer);
-                  }
+              // test the style
+              if(p in element.style) {
+                  element.style[p] = (toggle == null || toggle) && value || '';
                   break;
+              }
+          }
+      },
 
-              case EVENT_RELEASE:
-                  clearTimeout(timer);
-                  break;
+      /**
+       * toggle browser default behavior by setting css properties.
+       * `userSelect='none'` also sets `element.onselectstart` to false
+       * `userDrag='none'` also sets `element.ondragstart` to false
+       *
+       * @method toggleBehavior
+       * @param {HtmlElement} element
+       * @param {Object} props
+       * @param {Boolean} [toggle=true]
+       */
+      toggleBehavior: function toggleBehavior(element, props, toggle) {
+          if(!props || !element || !element.style) {
+              return;
           }
-      }
 
-      Hammer.gestures.Hold = {
-          name: name,
-          index: 10,
-          defaults: {
-              /**
-               * @property holdTimeout
-               * @type {Number}
-               * @default 500
-               */
-              holdTimeout: 500,
+          // set the css properties
+          Utils.each(props, function(value, prop) {
+              Utils.setPrefixedCss(element, prop, value, toggle);
+          });
 
-              /**
-               * movement allowed while holding
-               * @property holdThreshold
-               * @type {Number}
-               * @default 2
-               */
-              holdThreshold: 2
-          },
-          handler: holdGesture
-      };
-  })('hold');
+          var falseFn = toggle && function() {
+              return false;
+          };
 
-  /**
-   * @module gestures
-   */
-  /**
-   * when a touch is being released from the page
-   *
-   * @class Release
-   * @static
-   */
-  /**
-   * @event release
-   * @param {Object} ev
-   */
-  Hammer.gestures.Release = {
-      name: 'release',
-      index: Infinity,
-      handler: function releaseGesture(ev, inst) {
-          if(ev.eventType == EVENT_RELEASE) {
-              inst.trigger(this.name, ev);
+          // also the disable onselectstart
+          if(props.userSelect == 'none') {
+              element.onselectstart = falseFn;
+          }
+          // and disable ondragstart
+          if(props.userDrag == 'none') {
+              element.ondragstart = falseFn;
           }
+      },
+
+      /**
+       * convert a string with underscores to camelCase
+       * so prevent_default becomes preventDefault
+       * @param {String} str
+       * @return {String} camelCaseStr
+       */
+      toCamelCase: function toCamelCase(str) {
+          return str.replace(/[_-]([a-z])/g, function(s) {
+              return s[1].toUpperCase();
+          });
       }
   };
 
+
   /**
-   * @module gestures
+   * @module hammer
    */
   /**
-   * triggers swipe events when the end velocity is above the threshold
-   * for best usage, set `preventDefault` (on the drag gesture) to `true`
-   * ````
-   *  hammertime.on("dragleft swipeleft", function(ev) {
-   *    console.log(ev);
-   *    ev.gesture.preventDefault();
-   *  });
-   * ````
-   *
-   * @class Swipe
+   * @class Event
    * @static
    */
-  /**
-   * @event swipe
-   * @param {Object} ev
-   */
-  /**
-   * @event swipeleft
-   * @param {Object} ev
-   */
-  /**
-   * @event swiperight
-   * @param {Object} ev
-   */
-  /**
-   * @event swipeup
-   * @param {Object} ev
-   */
-  /**
-   * @event swipedown
-   * @param {Object} ev
-   */
-  Hammer.gestures.Swipe = {
-      name: 'swipe',
-      index: 40,
-      defaults: {
-          /**
-           * @property swipeMinTouches
-           * @type {Number}
-           * @default 1
-           */
-          swipeMinTouches: 1,
+  var Event = Hammer.event = {
+      /**
+       * when touch events have been fired, this is true
+       * this is used to stop mouse events
+       * @property prevent_mouseevents
+       * @private
+       * @type {Boolean}
+       */
+      preventMouseEvents: false,
 
-          /**
-           * @property swipeMaxTouches
-           * @type {Number}
-           * @default 1
-           */
-          swipeMaxTouches: 1,
+      /**
+       * if EVENT_START has been fired
+       * @property started
+       * @private
+       * @type {Boolean}
+       */
+      started: false,
 
-          /**
-           * horizontal swipe velocity
-           * @property swipeVelocityX
-           * @type {Number}
-           * @default 0.6
-           */
-          swipeVelocityX: 0.6,
+      /**
+       * when the mouse is hold down, this is true
+       * @property should_detect
+       * @private
+       * @type {Boolean}
+       */
+      shouldDetect: false,
 
-          /**
-           * vertical swipe velocity
-           * @property swipeVelocityY
-           * @type {Number}
-           * @default 0.6
-           */
-          swipeVelocityY: 0.6
+      /**
+       * simple event binder with a hook and support for multiple types
+       * @method on
+       * @param {HTMLElement} element
+       * @param {String} type
+       * @param {Function} handler
+       * @param {Function} [hook]
+       * @param {Object} hook.type
+       */
+      on: function on(element, type, handler, hook) {
+          var types = type.split(' ');
+          Utils.each(types, function(type) {
+              Utils.on(element, type, handler);
+              hook && hook(type);
+          });
       },
 
-      handler: function swipeGesture(ev, inst) {
-          if(ev.eventType == EVENT_RELEASE) {
-              var touches = ev.touches.length,
-                  options = inst.options;
+      /**
+       * simple event unbinder with a hook and support for multiple types
+       * @method off
+       * @param {HTMLElement} element
+       * @param {String} type
+       * @param {Function} handler
+       * @param {Function} [hook]
+       * @param {Object} hook.type
+       */
+      off: function off(element, type, handler, hook) {
+          var types = type.split(' ');
+          Utils.each(types, function(type) {
+              Utils.off(element, type, handler);
+              hook && hook(type);
+          });
+      },
 
-              // max touches
-              if(touches < options.swipeMinTouches ||
-                  touches > options.swipeMaxTouches) {
+      /**
+       * the core touch event handler.
+       * this finds out if we should to detect gestures
+       * @method onTouch
+       * @param {HTMLElement} element
+       * @param {String} eventType matches `EVENT_START|MOVE|END`
+       * @param {Function} handler
+       * @return onTouchHandler {Function} the core event handler
+       */
+      onTouch: function onTouch(element, eventType, handler) {
+          var self = this;
+
+          var onTouchHandler = function onTouchHandler(ev) {
+              var srcType = ev.type.toLowerCase(),
+                  isPointer = Hammer.HAS_POINTEREVENTS,
+                  isMouse = Utils.inStr(srcType, 'mouse'),
+                  triggerType;
+
+              // if we are in a mouseevent, but there has been a touchevent triggered in this session
+              // we want to do nothing. simply break out of the event.
+              if(isMouse && self.preventMouseEvents) {
                   return;
+
+              // mousebutton must be down
+              } else if(isMouse && eventType == EVENT_START && ev.button === 0) {
+                  self.preventMouseEvents = false;
+                  self.shouldDetect = true;
+              } else if(isPointer && eventType == EVENT_START) {
+                  self.shouldDetect = (ev.buttons === 1 || PointerEvent.matchType(POINTER_TOUCH, ev));
+              // just a valid start event, but no mouse
+              } else if(!isMouse && eventType == EVENT_START) {
+                  self.preventMouseEvents = true;
+                  self.shouldDetect = true;
               }
 
-              // when the distance we moved is too small we skip this gesture
-              // or we can be already in dragging
-              if(ev.velocityX > options.swipeVelocityX ||
-                  ev.velocityY > options.swipeVelocityY) {
-                  // trigger swipe events
-                  inst.trigger(this.name, ev);
-                  inst.trigger(this.name + ev.direction, ev);
+              // update the pointer event before entering the detection
+              if(isPointer && eventType != EVENT_END) {
+                  PointerEvent.updatePointer(eventType, ev);
+              }
+
+              // we are in a touch/down state, so allowed detection of gestures
+              if(self.shouldDetect) {
+                  triggerType = self.doDetect.call(self, ev, eventType, element, handler);
+              }
+
+              // ...and we are done with the detection
+              // so reset everything to start each detection totally fresh
+              if(triggerType == EVENT_END) {
+                  self.preventMouseEvents = false;
+                  self.shouldDetect = false;
+                  PointerEvent.reset();
+              // update the pointerevent object after the detection
+              }
+
+              if(isPointer && eventType == EVENT_END) {
+                  PointerEvent.updatePointer(eventType, ev);
               }
+          };
+
+          this.on(element, EVENT_TYPES[eventType], onTouchHandler);
+          return onTouchHandler;
+      },
+
+      /**
+       * the core detection method
+       * this finds out what hammer-touch-events to trigger
+       * @method doDetect
+       * @param {Object} ev
+       * @param {String} eventType matches `EVENT_START|MOVE|END`
+       * @param {HTMLElement} element
+       * @param {Function} handler
+       * @return {String} triggerType matches `EVENT_START|MOVE|END`
+       */
+      doDetect: function doDetect(ev, eventType, element, handler) {
+          var touchList = this.getTouchList(ev, eventType);
+          var touchListLength = touchList.length;
+          var triggerType = eventType;
+          var triggerChange = touchList.trigger; // used by fakeMultitouch plugin
+          var changedLength = touchListLength;
+
+          // at each touchstart-like event we want also want to trigger a TOUCH event...
+          if(eventType == EVENT_START) {
+              triggerChange = EVENT_TOUCH;
+          // ...the same for a touchend-like event
+          } else if(eventType == EVENT_END) {
+              triggerChange = EVENT_RELEASE;
+
+              // keep track of how many touches have been removed
+              changedLength = touchList.length - ((ev.changedTouches) ? ev.changedTouches.length : 1);
           }
-      }
-  };
 
-  /**
-   * @module gestures
-   */
-  /**
-   * Single tap and a double tap on a place
-   *
-   * @class Tap
-   * @static
-   */
-  /**
-   * @event tap
-   * @param {Object} ev
-   */
-  /**
-   * @event doubletap
-   * @param {Object} ev
-   */
+          // after there are still touches on the screen,
+          // we just want to trigger a MOVE event. so change the START or END to a MOVE
+          // but only after detection has been started, the first time we actualy want a START
+          if(changedLength > 0 && this.started) {
+              triggerType = EVENT_MOVE;
+          }
 
-  /**
-   * @param {String} name
-   */
-  (function(name) {
-      var hasMoved = false;
+          // detection has been started, we keep track of this, see above
+          this.started = true;
 
-      function tapGesture(ev, inst) {
-          var options = inst.options,
-              current = Detection.current,
-              prev = Detection.previous,
-              sincePrev,
-              didDoubleTap;
+          // generate some event data, some basic information
+          var evData = this.collectEventData(element, triggerType, touchList, ev);
 
-          switch(ev.eventType) {
-              case EVENT_START:
-                  hasMoved = false;
-                  break;
+          // trigger the triggerType event before the change (TOUCH, RELEASE) events
+          // but the END event should be at last
+          if(eventType != EVENT_END) {
+              handler.call(Detection, evData);
+          }
 
-              case EVENT_MOVE:
-                  hasMoved = hasMoved || (ev.distance > options.tapMaxDistance);
-                  break;
+          // trigger a change (TOUCH, RELEASE) event, this means the length of the touches changed
+          if(triggerChange) {
+              evData.changedLength = changedLength;
+              evData.eventType = triggerChange;
 
-              case EVENT_END:
-                  if(!Utils.inStr(ev.srcEvent.type, 'cancel') && ev.deltaTime < options.tapMaxTime && !hasMoved) {
-                      // previous gesture, for the double tap since these are two different gesture detections
-                      sincePrev = prev && prev.lastEvent && ev.timeStamp - prev.lastEvent.timeStamp;
-                      didDoubleTap = false;
+              handler.call(Detection, evData);
 
-                      // check if double tap
-                      if(prev && prev.name == name &&
-                          (sincePrev && sincePrev < options.doubleTapInterval) &&
-                          ev.distance < options.doubleTapDistance) {
-                          inst.trigger('doubletap', ev);
-                          didDoubleTap = true;
-                      }
+              evData.eventType = triggerType;
+              delete evData.changedLength;
+          }
 
-                      // do a single tap
-                      if(!didDoubleTap || options.tapAlways) {
-                          current.name = name;
-                          inst.trigger(current.name, ev);
-                      }
+          // trigger the END event
+          if(triggerType == EVENT_END) {
+              handler.call(Detection, evData);
+
+              // ...and we are done with the detection
+              // so reset everything to start each detection totally fresh
+              this.started = false;
+          }
+
+          return triggerType;
+      },
+
+      /**
+       * we have different events for each device/browser
+       * determine what we need and set them in the EVENT_TYPES constant
+       * the `onTouch` method is bind to these properties.
+       * @method determineEventTypes
+       * @return {Object} events
+       */
+      determineEventTypes: function determineEventTypes() {
+          var types;
+          if(Hammer.HAS_POINTEREVENTS) {
+              if(window.PointerEvent) {
+                  types = [
+                      'pointerdown',
+                      'pointermove',
+                      'pointerup pointercancel lostpointercapture'
+                  ];
+              } else {
+                  types = [
+                      'MSPointerDown',
+                      'MSPointerMove',
+                      'MSPointerUp MSPointerCancel MSLostPointerCapture'
+                  ];
+              }
+          } else if(Hammer.NO_MOUSEEVENTS) {
+              types = [
+                  'touchstart',
+                  'touchmove',
+                  'touchend touchcancel'
+              ];
+          } else {
+              types = [
+                  'touchstart mousedown',
+                  'touchmove mousemove',
+                  'touchend touchcancel mouseup'
+              ];
+          }
+
+          EVENT_TYPES[EVENT_START] = types[0];
+          EVENT_TYPES[EVENT_MOVE] = types[1];
+          EVENT_TYPES[EVENT_END] = types[2];
+          return EVENT_TYPES;
+      },
+
+      /**
+       * create touchList depending on the event
+       * @method getTouchList
+       * @param {Object} ev
+       * @param {String} eventType
+       * @return {Array} touches
+       */
+      getTouchList: function getTouchList(ev, eventType) {
+          // get the fake pointerEvent touchlist
+          if(Hammer.HAS_POINTEREVENTS) {
+              return PointerEvent.getTouchList();
+          }
+
+          // get the touchlist
+          if(ev.touches) {
+              if(eventType == EVENT_MOVE) {
+                  return ev.touches;
+              }
+
+              var identifiers = [];
+              var concat = [].concat(Utils.toArray(ev.touches), Utils.toArray(ev.changedTouches));
+              var touchList = [];
+
+              Utils.each(concat, function(touch) {
+                  if(Utils.inArray(identifiers, touch.identifier) === false) {
+                      touchList.push(touch);
                   }
-                  break;
+                  identifiers.push(touch.identifier);
+              });
+
+              return touchList;
           }
-      }
 
-      Hammer.gestures.Tap = {
-          name: name,
-          index: 100,
-          handler: tapGesture,
-          defaults: {
-              /**
-               * max time of a tap, this is for the slow tappers
-               * @property tapMaxTime
-               * @type {Number}
-               * @default 250
-               */
-              tapMaxTime: 250,
+          // make fake touchList from mouse position
+          ev.identifier = 1;
+          return [ev];
+      },
 
-              /**
-               * max distance of movement of a tap, this is for the slow tappers
-               * @property tapMaxDistance
-               * @type {Number}
-               * @default 10
-               */
-              tapMaxDistance: 10,
+      /**
+       * collect basic event data
+       * @method collectEventData
+       * @param {HTMLElement} element
+       * @param {String} eventType matches `EVENT_START|MOVE|END`
+       * @param {Array} touches
+       * @param {Object} ev
+       * @return {Object} ev
+       */
+      collectEventData: function collectEventData(element, eventType, touches, ev) {
+          // find out pointerType
+          var pointerType = POINTER_TOUCH;
+          if(Utils.inStr(ev.type, 'mouse') || PointerEvent.matchType(POINTER_MOUSE, ev)) {
+              pointerType = POINTER_MOUSE;
+          } else if(PointerEvent.matchType(POINTER_PEN, ev)) {
+              pointerType = POINTER_PEN;
+          }
+
+          return {
+              center: Utils.getCenter(touches),
+              timeStamp: Date.now(),
+              target: ev.target,
+              touches: touches,
+              eventType: eventType,
+              pointerType: pointerType,
+              srcEvent: ev,
 
               /**
-               * always trigger the `tap` event, even while double-tapping
-               * @property tapAlways
-               * @type {Boolean}
-               * @default true
+               * prevent the browser default actions
+               * mostly used to disable scrolling of the browser
                */
-              tapAlways: true,
+              preventDefault: function() {
+                  var srcEvent = this.srcEvent;
+                  srcEvent.preventManipulation && srcEvent.preventManipulation();
+                  srcEvent.preventDefault && srcEvent.preventDefault();
+              },
 
               /**
-               * max distance between two taps
-               * @property doubleTapDistance
-               * @type {Number}
-               * @default 20
+               * stop bubbling the event up to its parents
                */
-              doubleTapDistance: 20,
+              stopPropagation: function() {
+                  this.srcEvent.stopPropagation();
+              },
 
               /**
-               * max time between two taps
-               * @property doubleTapInterval
-               * @type {Number}
-               * @default 300
+               * immediately stop gesture detection
+               * might be useful after a swipe was detected
+               * @return {*}
                */
-              doubleTapInterval: 300
-          }
-      };
-  })('tap');
+              stopDetect: function() {
+                  return Detection.stopDetect();
+              }
+          };
+      }
+  };
+
 
   /**
-   * @module gestures
-   */
-  /**
-   * when a touch is being touched at the page
+   * @module hammer
    *
-   * @class Touch
+   * @class PointerEvent
    * @static
    */
-  /**
-   * @event touch
-   * @param {Object} ev
-   */
-  Hammer.gestures.Touch = {
-      name: 'touch',
-      index: -Infinity,
-      defaults: {
-          /**
-           * call preventDefault at touchstart, and makes the element blocking by disabling the scrolling of the page,
-           * but it improves gestures like transforming and dragging.
-           * be careful with using this, it can be very annoying for users to be stuck on the page
-           * @property preventDefault
-           * @type {Boolean}
-           * @default false
-           */
-          preventDefault: false,
+  var PointerEvent = Hammer.PointerEvent = {
+      /**
+       * holds all pointers, by `identifier`
+       * @property pointers
+       * @type {Object}
+       */
+      pointers: {},
 
-          /**
-           * disable mouse events, so only touch (or pen!) input triggers events
-           * @property preventMouse
-           * @type {Boolean}
-           * @default false
-           */
-          preventMouse: false
+      /**
+       * get the pointers as an array
+       * @method getTouchList
+       * @return {Array} touchlist
+       */
+      getTouchList: function getTouchList() {
+          var touchlist = [];
+          // we can use forEach since pointerEvents only is in IE10
+          Utils.each(this.pointers, function(pointer) {
+              touchlist.push(pointer);
+          });
+          return touchlist;
       },
-      handler: function touchGesture(ev, inst) {
-          if(inst.options.preventMouse && ev.pointerType == POINTER_MOUSE) {
-              ev.stopDetect();
-              return;
-          }
 
-          if(inst.options.preventDefault) {
-              ev.preventDefault();
+      /**
+       * update the position of a pointer
+       * @method updatePointer
+       * @param {String} eventType matches `EVENT_START|MOVE|END`
+       * @param {Object} pointerEvent
+       */
+      updatePointer: function updatePointer(eventType, pointerEvent) {
+          if(eventType == EVENT_END || (eventType != EVENT_END && pointerEvent.buttons !== 1)) {
+              delete this.pointers[pointerEvent.pointerId];
+          } else {
+              pointerEvent.identifier = pointerEvent.pointerId;
+              this.pointers[pointerEvent.pointerId] = pointerEvent;
           }
+      },
 
-          if(ev.eventType == EVENT_TOUCH) {
-              inst.trigger('touch', ev);
+      /**
+       * check if ev matches pointertype
+       * @method matchType
+       * @param {String} pointerType matches `POINTER_MOUSE|TOUCH|PEN`
+       * @param {PointerEvent} ev
+       */
+      matchType: function matchType(pointerType, ev) {
+          if(!ev.pointerType) {
+              return false;
           }
+
+          var pt = ev.pointerType,
+              types = {};
+
+          types[POINTER_MOUSE] = (pt === (ev.MSPOINTER_TYPE_MOUSE || POINTER_MOUSE));
+          types[POINTER_TOUCH] = (pt === (ev.MSPOINTER_TYPE_TOUCH || POINTER_TOUCH));
+          types[POINTER_PEN] = (pt === (ev.MSPOINTER_TYPE_PEN || POINTER_PEN));
+          return types[pointerType];
+      },
+
+      /**
+       * reset the stored pointers
+       * @method reset
+       */
+      reset: function resetList() {
+          this.pointers = {};
       }
   };
 
+
   /**
-   * @module gestures
-   */
-  /**
-   * User want to scale or rotate with 2 fingers
-   * Preventing the default browser behavior is a good way to improve feel and working. This can be done with the
-   * `preventDefault` option.
+   * @module hammer
    *
-   * @class Transform
+   * @class Detection
    * @static
    */
+  var Detection = Hammer.detection = {
+      // contains all registred Hammer.gestures in the correct order
+      gestures: [],
+
+      // data of the current Hammer.gesture detection session
+      current: null,
+
+      // the previous Hammer.gesture session data
+      // is a full clone of the previous gesture.current object
+      previous: null,
+
+      // when this becomes true, no gestures are fired
+      stopped: false,
+
+      /**
+       * start Hammer.gesture detection
+       * @method startDetect
+       * @param {Hammer.Instance} inst
+       * @param {Object} eventData
+       */
+      startDetect: function startDetect(inst, eventData) {
+          // already busy with a Hammer.gesture detection on an element
+          if(this.current) {
+              return;
+          }
+
+          this.stopped = false;
+
+          // holds current session
+          this.current = {
+              inst: inst, // reference to HammerInstance we're working for
+              startEvent: Utils.extend({}, eventData), // start eventData for distances, timing etc
+              lastEvent: false, // last eventData
+              lastCalcEvent: false, // last eventData for calculations.
+              futureCalcEvent: false, // last eventData for calculations.
+              lastCalcData: {}, // last lastCalcData
+              name: '' // current gesture we're in/detected, can be 'tap', 'hold' etc
+          };
+
+          this.detect(eventData);
+      },
+
+      /**
+       * Hammer.gesture detection
+       * @method detect
+       * @param {Object} eventData
+       * @return {any}
+       */
+      detect: function detect(eventData) {
+          if(!this.current || this.stopped) {
+              return;
+          }
+
+          // extend event data with calculations about scale, distance etc
+          eventData = this.extendEventData(eventData);
+
+          // hammer instance and instance options
+          var inst = this.current.inst,
+              instOptions = inst.options;
+
+          // call Hammer.gesture handlers
+          Utils.each(this.gestures, function triggerGesture(gesture) {
+              // only when the instance options have enabled this gesture
+              if(!this.stopped && inst.enabled && instOptions[gesture.name]) {
+                  gesture.handler.call(gesture, eventData, inst);
+              }
+          }, this);
+
+          // store as previous event event
+          if(this.current) {
+              this.current.lastEvent = eventData;
+          }
+
+          if(eventData.eventType == EVENT_END) {
+              this.stopDetect();
+          }
+
+          return eventData;
+      },
+
+      /**
+       * clear the Hammer.gesture vars
+       * this is called on endDetect, but can also be used when a final Hammer.gesture has been detected
+       * to stop other Hammer.gestures from being fired
+       * @method stopDetect
+       */
+      stopDetect: function stopDetect() {
+          // clone current data to the store as the previous gesture
+          // used for the double tap gesture, since this is an other gesture detect session
+          this.previous = Utils.extend({}, this.current);
+
+          // reset the current
+          this.current = null;
+          this.stopped = true;
+      },
+
+      /**
+       * calculate velocity, angle and direction
+       * @method getVelocityData
+       * @param {Object} ev
+       * @param {Object} center
+       * @param {Number} deltaTime
+       * @param {Number} deltaX
+       * @param {Number} deltaY
+       */
+      getCalculatedData: function getCalculatedData(ev, center, deltaTime, deltaX, deltaY) {
+          var cur = this.current,
+              recalc = false,
+              calcEv = cur.lastCalcEvent,
+              calcData = cur.lastCalcData;
+
+          if(calcEv && ev.timeStamp - calcEv.timeStamp > Hammer.CALCULATE_INTERVAL) {
+              center = calcEv.center;
+              deltaTime = ev.timeStamp - calcEv.timeStamp;
+              deltaX = ev.center.clientX - calcEv.center.clientX;
+              deltaY = ev.center.clientY - calcEv.center.clientY;
+              recalc = true;
+          }
+
+          if(ev.eventType == EVENT_TOUCH || ev.eventType == EVENT_RELEASE) {
+              cur.futureCalcEvent = ev;
+          }
+
+          if(!cur.lastCalcEvent || recalc) {
+              calcData.velocity = Utils.getVelocity(deltaTime, deltaX, deltaY);
+              calcData.angle = Utils.getAngle(center, ev.center);
+              calcData.direction = Utils.getDirection(center, ev.center);
+
+              cur.lastCalcEvent = cur.futureCalcEvent || ev;
+              cur.futureCalcEvent = ev;
+          }
+
+          ev.velocityX = calcData.velocity.x;
+          ev.velocityY = calcData.velocity.y;
+          ev.interimAngle = calcData.angle;
+          ev.interimDirection = calcData.direction;
+      },
+
+      /**
+       * extend eventData for Hammer.gestures
+       * @method extendEventData
+       * @param {Object} ev
+       * @return {Object} ev
+       */
+      extendEventData: function extendEventData(ev) {
+          var cur = this.current,
+              startEv = cur.startEvent,
+              lastEv = cur.lastEvent || startEv;
+
+          // update the start touchlist to calculate the scale/rotation
+          if(ev.eventType == EVENT_TOUCH || ev.eventType == EVENT_RELEASE) {
+              startEv.touches = [];
+              Utils.each(ev.touches, function(touch) {
+                  startEv.touches.push({
+                      clientX: touch.clientX,
+                      clientY: touch.clientY
+                  });
+              });
+          }
+
+          var deltaTime = ev.timeStamp - startEv.timeStamp,
+              deltaX = ev.center.clientX - startEv.center.clientX,
+              deltaY = ev.center.clientY - startEv.center.clientY;
+
+          this.getCalculatedData(ev, lastEv.center, deltaTime, deltaX, deltaY);
+
+          Utils.extend(ev, {
+              startEvent: startEv,
+
+              deltaTime: deltaTime,
+              deltaX: deltaX,
+              deltaY: deltaY,
+
+              distance: Utils.getDistance(startEv.center, ev.center),
+              angle: Utils.getAngle(startEv.center, ev.center),
+              direction: Utils.getDirection(startEv.center, ev.center),
+              scale: Utils.getScale(startEv.touches, ev.touches),
+              rotation: Utils.getRotation(startEv.touches, ev.touches)
+          });
+
+          return ev;
+      },
+
+      /**
+       * register new gesture
+       * @method register
+       * @param {Object} gesture object, see `gestures/` for documentation
+       * @return {Array} gestures
+       */
+      register: function register(gesture) {
+          // add an enable gesture options if there is no given
+          var options = gesture.defaults || {};
+          if(options[gesture.name] === undefined) {
+              options[gesture.name] = true;
+          }
+
+          // extend Hammer default options with the Hammer.gesture options
+          Utils.extend(Hammer.defaults, options, true);
+
+          // set its index
+          gesture.index = gesture.index || 1000;
+
+          // add Hammer.gesture to the list
+          this.gestures.push(gesture);
+
+          // sort the list by index
+          this.gestures.sort(function(a, b) {
+              if(a.index < b.index) {
+                  return -1;
+              }
+              if(a.index > b.index) {
+                  return 1;
+              }
+              return 0;
+          });
+
+          return this.gestures;
+      }
+  };
+
+
+  /**
+   * @module hammer
+   */
+
   /**
-   * @event transform
+   * create new hammer instance
+   * all methods should return the instance itself, so it is chainable.
+   *
+   * @class Instance
+   * @constructor
+   * @param {HTMLElement} element
+   * @param {Object} [options={}] options are merged with `Hammer.defaults`
+   * @return {Hammer.Instance}
+   */
+  Hammer.Instance = function(element, options) {
+      var self = this;
+
+      // setup HammerJS window events and register all gestures
+      // this also sets up the default options
+      setup();
+
+      /**
+       * @property element
+       * @type {HTMLElement}
+       */
+      this.element = element;
+
+      /**
+       * @property enabled
+       * @type {Boolean}
+       * @protected
+       */
+      this.enabled = true;
+
+      /**
+       * options, merged with the defaults
+       * options with an _ are converted to camelCase
+       * @property options
+       * @type {Object}
+       */
+      Utils.each(options, function(value, name) {
+          delete options[name];
+          options[Utils.toCamelCase(name)] = value;
+      });
+
+      this.options = Utils.extend(Utils.extend({}, Hammer.defaults), options || {});
+
+      // add some css to the element to prevent the browser from doing its native behavoir
+      if(this.options.behavior) {
+          Utils.toggleBehavior(this.element, this.options.behavior, true);
+      }
+
+      /**
+       * event start handler on the element to start the detection
+       * @property eventStartHandler
+       * @type {Object}
+       */
+      this.eventStartHandler = Event.onTouch(element, EVENT_START, function(ev) {
+          if(self.enabled && ev.eventType == EVENT_START) {
+              Detection.startDetect(self, ev);
+          } else if(ev.eventType == EVENT_TOUCH) {
+              Detection.detect(ev);
+          }
+      });
+
+      /**
+       * keep a list of user event handlers which needs to be removed when calling 'dispose'
+       * @property eventHandlers
+       * @type {Array}
+       */
+      this.eventHandlers = [];
+  };
+
+  Hammer.Instance.prototype = {
+      /**
+       * bind events to the instance
+       * @method on
+       * @chainable
+       * @param {String} gestures multiple gestures by splitting with a space
+       * @param {Function} handler
+       * @param {Object} handler.ev event object
+       */
+      on: function onEvent(gestures, handler) {
+          var self = this;
+          Event.on(self.element, gestures, handler, function(type) {
+              self.eventHandlers.push({ gesture: type, handler: handler });
+          });
+          return self;
+      },
+
+      /**
+       * unbind events to the instance
+       * @method off
+       * @chainable
+       * @param {String} gestures
+       * @param {Function} handler
+       */
+      off: function offEvent(gestures, handler) {
+          var self = this;
+
+          Event.off(self.element, gestures, handler, function(type) {
+              var index = Utils.inArray({ gesture: type, handler: handler });
+              if(index !== false) {
+                  self.eventHandlers.splice(index, 1);
+              }
+          });
+          return self;
+      },
+
+      /**
+       * trigger gesture event
+       * @method trigger
+       * @chainable
+       * @param {String} gesture
+       * @param {Object} [eventData]
+       */
+      trigger: function triggerEvent(gesture, eventData) {
+          // optional
+          if(!eventData) {
+              eventData = {};
+          }
+
+          // create DOM event
+          var event = Hammer.DOCUMENT.createEvent('Event');
+          event.initEvent(gesture, true, true);
+          event.gesture = eventData;
+
+          // trigger on the target if it is in the instance element,
+          // this is for event delegation tricks
+          var element = this.element;
+          if(Utils.hasParent(eventData.target, element)) {
+              element = eventData.target;
+          }
+
+          element.dispatchEvent(event);
+          return this;
+      },
+
+      /**
+       * enable of disable hammer.js detection
+       * @method enable
+       * @chainable
+       * @param {Boolean} state
+       */
+      enable: function enable(state) {
+          this.enabled = state;
+          return this;
+      },
+
+      /**
+       * dispose this hammer instance
+       * @method dispose
+       * @return {Null}
+       */
+      dispose: function dispose() {
+          var i, eh;
+
+          // undo all changes made by stop_browser_behavior
+          Utils.toggleBehavior(this.element, this.options.behavior, false);
+
+          // unbind all custom event handlers
+          for(i = -1; (eh = this.eventHandlers[++i]);) {
+              Utils.off(this.element, eh.gesture, eh.handler);
+          }
+
+          this.eventHandlers = [];
+
+          // unbind the start event listener
+          Event.off(this.element, EVENT_TYPES[EVENT_START], this.eventStartHandler);
+
+          return null;
+      }
+  };
+
+
+  /**
+   * @module gestures
+   */
+  /**
+   * Move with x fingers (default 1) around on the page.
+   * Preventing the default browser behavior is a good way to improve feel and working.
+   * ````
+   *  hammertime.on("drag", function(ev) {
+   *    console.log(ev);
+   *    ev.gesture.preventDefault();
+   *  });
+   * ````
+   *
+   * @class Drag
+   * @static
+   */
+  /**
+   * @event drag
    * @param {Object} ev
    */
   /**
-   * @event transformstart
+   * @event dragstart
    * @param {Object} ev
    */
   /**
-   * @event transformend
+   * @event dragend
    * @param {Object} ev
    */
   /**
-   * @event pinchin
+   * @event drapleft
    * @param {Object} ev
    */
   /**
-   * @event pinchout
+   * @event dragright
    * @param {Object} ev
    */
   /**
-   * @event rotate
+   * @event dragup
+   * @param {Object} ev
+   */
+  /**
+   * @event dragdown
    * @param {Object} ev
    */
 
@@ -29547,30 +30490,65 @@ return /******/ (function(modules) { // webpackBootstrap
   (function(name) {
       var triggered = false;
 
-      function transformGesture(ev, inst) {
+      function dragGesture(ev, inst) {
+          var cur = Detection.current;
+
+          // max touches
+          if(inst.options.dragMaxTouches > 0 &&
+              ev.touches.length > inst.options.dragMaxTouches) {
+              return;
+          }
+
           switch(ev.eventType) {
               case EVENT_START:
                   triggered = false;
                   break;
 
               case EVENT_MOVE:
-                  // at least multitouch
-                  if(ev.touches.length < 2) {
+                  // when the distance we moved is too small we skip this gesture
+                  // or we can be already in dragging
+                  if(ev.distance < inst.options.dragMinDistance &&
+                      cur.name != name) {
                       return;
                   }
 
-                  var scaleThreshold = Math.abs(1 - ev.scale);
-                  var rotationThreshold = Math.abs(ev.rotation);
+                  var startCenter = cur.startEvent.center;
 
-                  // when the distance we moved is too small we skip this gesture
-                  // or we can be already in dragging
-                  if(scaleThreshold < inst.options.transformMinScale &&
-                      rotationThreshold < inst.options.transformMinRotation) {
-                      return;
+                  // we are dragging!
+                  if(cur.name != name) {
+                      cur.name = name;
+                      if(inst.options.dragDistanceCorrection && ev.distance > 0) {
+                          // When a drag is triggered, set the event center to dragMinDistance pixels from the original event center.
+                          // Without this correction, the dragged distance would jumpstart at dragMinDistance pixels instead of at 0.
+                          // It might be useful to save the original start point somewhere
+                          var factor = Math.abs(inst.options.dragMinDistance / ev.distance);
+                          startCenter.pageX += ev.deltaX * factor;
+                          startCenter.pageY += ev.deltaY * factor;
+                          startCenter.clientX += ev.deltaX * factor;
+                          startCenter.clientY += ev.deltaY * factor;
+
+                          // recalculate event data using new start point
+                          ev = Detection.extendEventData(ev);
+                      }
                   }
 
-                  // we are transforming!
-                  Detection.current.name = name;
+                  // lock drag to axis?
+                  if(cur.lastEvent.dragLockToAxis ||
+                      ( inst.options.dragLockToAxis &&
+                          inst.options.dragLockMinDistance <= ev.distance
+                          )) {
+                      ev.dragLockToAxis = true;
+                  }
+
+                  // keep direction on the axis that the drag gesture started on
+                  var lastDirection = cur.lastEvent.direction;
+                  if(ev.dragLockToAxis && lastDirection !== ev.direction) {
+                      if(Utils.isVertical(lastDirection)) {
+                          ev.direction = (ev.deltaY < 0) ? DIRECTION_UP : DIRECTION_DOWN;
+                      } else {
+                          ev.direction = (ev.deltaX < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
+                      }
+                  }
 
                   // first time, trigger dragstart event
                   if(!triggered) {
@@ -29578,4537 +30556,3672 @@ return /******/ (function(modules) { // webpackBootstrap
                       triggered = true;
                   }
 
-                  inst.trigger(name, ev); // basic transform event
+                  // trigger events
+                  inst.trigger(name, ev);
+                  inst.trigger(name + ev.direction, ev);
 
-                  // trigger rotate event
-                  if(rotationThreshold > inst.options.transformMinRotation) {
-                      inst.trigger('rotate', ev);
-                  }
+                  var isVertical = Utils.isVertical(ev.direction);
 
-                  // trigger pinch event
-                  if(scaleThreshold > inst.options.transformMinScale) {
-                      inst.trigger('pinch', ev);
-                      inst.trigger('pinch' + (ev.scale < 1 ? 'in' : 'out'), ev);
+                  // block the browser events
+                  if((inst.options.dragBlockVertical && isVertical) ||
+                      (inst.options.dragBlockHorizontal && !isVertical)) {
+                      ev.preventDefault();
                   }
                   break;
 
               case EVENT_RELEASE:
-                  if(triggered && ev.changedLength < 2) {
+                  if(triggered && ev.changedLength <= inst.options.dragMaxTouches) {
                       inst.trigger(name + 'end', ev);
                       triggered = false;
                   }
                   break;
-          }
+
+              case EVENT_END:
+                  triggered = false;
+                  break;
+          }
       }
 
-      Hammer.gestures.Transform = {
+      Hammer.gestures.Drag = {
           name: name,
-          index: 45,
+          index: 50,
+          handler: dragGesture,
           defaults: {
               /**
-               * minimal scale factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
-               * @property transformMinScale
+               * minimal movement that have to be made before the drag event gets triggered
+               * @property dragMinDistance
                * @type {Number}
-               * @default 0.01
+               * @default 10
                */
-              transformMinScale: 0.01,
+              dragMinDistance: 10,
 
               /**
-               * rotation in degrees
-               * @property transformMinRotation
+               * Set dragDistanceCorrection to true to make the starting point of the drag
+               * be calculated from where the drag was triggered, not from where the touch started.
+               * Useful to avoid a jerk-starting drag, which can make fine-adjustments
+               * through dragging difficult, and be visually unappealing.
+               * @property dragDistanceCorrection
+               * @type {Boolean}
+               * @default true
+               */
+              dragDistanceCorrection: true,
+
+              /**
+               * set 0 for unlimited, but this can conflict with transform
+               * @property dragMaxTouches
                * @type {Number}
                * @default 1
                */
-              transformMinRotation: 1
-          },
-
-          handler: transformGesture
-      };
-  })('transform');
-
-  /**
-   * @module hammer
-   */
+              dragMaxTouches: 1,
 
-  // AMD export
-  if(true) {
-      !(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
-          return Hammer;
-      }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-  // commonjs export
-  } else if(typeof module !== 'undefined' && module.exports) {
-      module.exports = Hammer;
-  // browser export
-  } else {
-      window.Hammer = Hammer;
-  }
+              /**
+               * prevent default browser behavior when dragging occurs
+               * be careful with it, it makes the element a blocking element
+               * when you are using the drag gesture, it is a good practice to set this true
+               * @property dragBlockHorizontal
+               * @type {Boolean}
+               * @default false
+               */
+              dragBlockHorizontal: false,
 
-  })(window);
+              /**
+               * same as `dragBlockHorizontal`, but for vertical movement
+               * @property dragBlockVertical
+               * @type {Boolean}
+               * @default false
+               */
+              dragBlockVertical: false,
 
-/***/ },
-/* 60 */
-/***/ function(module, exports, __webpack_require__) {
+              /**
+               * dragLockToAxis keeps the drag gesture on the axis that it started on,
+               * It disallows vertical directions if the initial direction was horizontal, and vice versa.
+               * @property dragLockToAxis
+               * @type {Boolean}
+               * @default false
+               */
+              dragLockToAxis: false,
 
-  var util = __webpack_require__(1);
-  var RepulsionMixin = __webpack_require__(68);
-  var HierarchialRepulsionMixin = __webpack_require__(69);
-  var BarnesHutMixin = __webpack_require__(70);
+              /**
+               * drag lock only kicks in when distance > dragLockMinDistance
+               * This way, locking occurs only when the distance has become large enough to reliably determine the direction
+               * @property dragLockMinDistance
+               * @type {Number}
+               * @default 25
+               */
+              dragLockMinDistance: 25
+          }
+      };
+  })('drag');
 
   /**
-   * Toggling barnes Hut calculation on and off.
+   * @module gestures
+   */
+  /**
+   * trigger a simple gesture event, so you can do anything in your handler.
+   * only usable if you know what your doing...
    *
-   * @private
+   * @class Gesture
+   * @static
    */
-  exports._toggleBarnesHut = function () {
-    this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
-    this._loadSelectedForceSolver();
-    this.moving = true;
-    this.start();
+  /**
+   * @event gesture
+   * @param {Object} ev
+   */
+  Hammer.gestures.Gesture = {
+      name: 'gesture',
+      index: 1337,
+      handler: function releaseGesture(ev, inst) {
+          inst.trigger(this.name, ev);
+      }
   };
 
-
   /**
-   * This loads the node force solver based on the barnes hut or repulsion algorithm
+   * @module gestures
+   */
+  /**
+   * Touch stays at the same place for x time
    *
-   * @private
+   * @class Hold
+   * @static
+   */
+  /**
+   * @event hold
+   * @param {Object} ev
    */
-  exports._loadSelectedForceSolver = function () {
-    // this overloads the this._calculateNodeForces
-    if (this.constants.physics.barnesHut.enabled == true) {
-      this._clearMixin(RepulsionMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
 
-      this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
-      this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
-      this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
-      this.constants.physics.damping = this.constants.physics.barnesHut.damping;
+  /**
+   * @param {String} name
+   */
+  (function(name) {
+      var timer;
 
-      this._loadMixin(BarnesHutMixin);
-    }
-    else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(RepulsionMixin);
+      function holdGesture(ev, inst) {
+          var options = inst.options,
+              current = Detection.current;
 
-      this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
-      this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
-      this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
-      this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
+          switch(ev.eventType) {
+              case EVENT_START:
+                  clearTimeout(timer);
 
-      this._loadMixin(HierarchialRepulsionMixin);
-    }
-    else {
-      this._clearMixin(BarnesHutMixin);
-      this._clearMixin(HierarchialRepulsionMixin);
-      this.barnesHutTree = undefined;
+                  // set the gesture so we can check in the timeout if it still is
+                  current.name = name;
 
-      this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
-      this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
-      this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
-      this.constants.physics.damping = this.constants.physics.repulsion.damping;
+                  // set timer and if after the timeout it still is hold,
+                  // we trigger the hold event
+                  timer = setTimeout(function() {
+                      if(current && current.name == name) {
+                          inst.trigger(name, ev);
+                      }
+                  }, options.holdTimeout);
+                  break;
 
-      this._loadMixin(RepulsionMixin);
-    }
-  };
+              case EVENT_MOVE:
+                  if(ev.distance > options.holdThreshold) {
+                      clearTimeout(timer);
+                  }
+                  break;
 
-  /**
-   * Before calculating the forces, we check if we need to cluster to keep up performance and we check
-   * if there is more than one node. If it is just one node, we dont calculate anything.
-   *
-   * @private
-   */
-  exports._initializeForceCalculation = function () {
-    // stop calculation if there is only one node
-    if (this.nodeIndices.length == 1) {
-      this.nodes[this.nodeIndices[0]]._setForce(0, 0);
-    }
-    else {
-      // if there are too many nodes on screen, we cluster without repositioning
-      if (this.nodeIndices.length > this.constants.clustering.clusterThreshold && this.constants.clustering.enabled == true) {
-        this.clusterToFit(this.constants.clustering.reduceToNodes, false);
+              case EVENT_RELEASE:
+                  clearTimeout(timer);
+                  break;
+          }
       }
 
-      // we now start the force calculation
-      this._calculateForces();
-    }
-  };
+      Hammer.gestures.Hold = {
+          name: name,
+          index: 10,
+          defaults: {
+              /**
+               * @property holdTimeout
+               * @type {Number}
+               * @default 500
+               */
+              holdTimeout: 500,
 
+              /**
+               * movement allowed while holding
+               * @property holdThreshold
+               * @type {Number}
+               * @default 2
+               */
+              holdThreshold: 2
+          },
+          handler: holdGesture
+      };
+  })('hold');
 
   /**
-   * Calculate the external forces acting on the nodes
-   * Forces are caused by: edges, repulsing forces between nodes, gravity
-   * @private
+   * @module gestures
    */
-  exports._calculateForces = function () {
-    // Gravity is required to keep separated groups from floating off
-    // the forces are reset to zero in this loop by using _setForce instead
-    // of _addForce
-
-    this._calculateGravitationalForces();
-    this._calculateNodeForces();
-
-    if (this.constants.physics.springConstant > 0) {
-      if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-        this._calculateSpringForcesWithSupport();
-      }
-      else {
-        if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
-          this._calculateHierarchicalSpringForces();
-        }
-        else {
-          this._calculateSpringForces();
-        }
-      }
-    }
-  };
-
-
   /**
-   * Smooth curves are created by adding invisible nodes in the center of the edges. These nodes are also
-   * handled in the calculateForces function. We then use a quadratic curve with the center node as control.
-   * This function joins the datanodes and invisible (called support) nodes into one object.
-   * We do this so we do not contaminate this.nodes with the support nodes.
+   * when a touch is being released from the page
    *
-   * @private
+   * @class Release
+   * @static
    */
-  exports._updateCalculationNodes = function () {
-    if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
-      this.calculationNodes = {};
-      this.calculationNodeIndices = [];
-
-      for (var nodeId in this.nodes) {
-        if (this.nodes.hasOwnProperty(nodeId)) {
-          this.calculationNodes[nodeId] = this.nodes[nodeId];
-        }
-      }
-      var supportNodes = this.sectors['support']['nodes'];
-      for (var supportNodeId in supportNodes) {
-        if (supportNodes.hasOwnProperty(supportNodeId)) {
-          if (this.edges.hasOwnProperty(supportNodes[supportNodeId].parentEdgeId)) {
-            this.calculationNodes[supportNodeId] = supportNodes[supportNodeId];
-          }
-          else {
-            supportNodes[supportNodeId]._setForce(0, 0);
+  /**
+   * @event release
+   * @param {Object} ev
+   */
+  Hammer.gestures.Release = {
+      name: 'release',
+      index: Infinity,
+      handler: function releaseGesture(ev, inst) {
+          if(ev.eventType == EVENT_RELEASE) {
+              inst.trigger(this.name, ev);
           }
-        }
-      }
-
-      for (var idx in this.calculationNodes) {
-        if (this.calculationNodes.hasOwnProperty(idx)) {
-          this.calculationNodeIndices.push(idx);
-        }
       }
-    }
-    else {
-      this.calculationNodes = this.nodes;
-      this.calculationNodeIndices = this.nodeIndices;
-    }
   };
 
-
   /**
-   * this function applies the central gravity effect to keep groups from floating off
-   *
-   * @private
+   * @module gestures
    */
-  exports._calculateGravitationalForces = function () {
-    var dx, dy, distance, node, i;
-    var nodes = this.calculationNodes;
-    var gravity = this.constants.physics.centralGravity;
-    var gravityForce = 0;
-
-    for (i = 0; i < this.calculationNodeIndices.length; i++) {
-      node = nodes[this.calculationNodeIndices[i]];
-      node.damping = this.constants.physics.damping; // possibly add function to alter damping properties of clusters.
-      // gravity does not apply when we are in a pocket sector
-      if (this._sector() == "default" && gravity != 0) {
-        dx = -node.x;
-        dy = -node.y;
-        distance = Math.sqrt(dx * dx + dy * dy);
-
-        gravityForce = (distance == 0) ? 0 : (gravity / distance);
-        node.fx = dx * gravityForce;
-        node.fy = dy * gravityForce;
-      }
-      else {
-        node.fx = 0;
-        node.fy = 0;
-      }
-    }
-  };
-
-
-
-
   /**
-   * this function calculates the effects of the springs in the case of unsmooth curves.
+   * triggers swipe events when the end velocity is above the threshold
+   * for best usage, set `preventDefault` (on the drag gesture) to `true`
+   * ````
+   *  hammertime.on("dragleft swipeleft", function(ev) {
+   *    console.log(ev);
+   *    ev.gesture.preventDefault();
+   *  });
+   * ````
    *
-   * @private
+   * @class Swipe
+   * @static
    */
-  exports._calculateSpringForces = function () {
-    var edgeLength, edge, edgeId;
-    var dx, dy, fx, fy, springForce, distance;
-    var edges = this.edges;
+  /**
+   * @event swipe
+   * @param {Object} ev
+   */
+  /**
+   * @event swipeleft
+   * @param {Object} ev
+   */
+  /**
+   * @event swiperight
+   * @param {Object} ev
+   */
+  /**
+   * @event swipeup
+   * @param {Object} ev
+   */
+  /**
+   * @event swipedown
+   * @param {Object} ev
+   */
+  Hammer.gestures.Swipe = {
+      name: 'swipe',
+      index: 40,
+      defaults: {
+          /**
+           * @property swipeMinTouches
+           * @type {Number}
+           * @default 1
+           */
+          swipeMinTouches: 1,
 
-    // forces caused by the edges, modelled as springs
-    for (edgeId in edges) {
-      if (edges.hasOwnProperty(edgeId)) {
-        edge = edges[edgeId];
-        if (edge.connected) {
-          // only calculate forces if nodes are in the same sector
-          if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
-            edgeLength = edge.physics.springLength;
-            // this implies that the edges between big clusters are longer
-            edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+          /**
+           * @property swipeMaxTouches
+           * @type {Number}
+           * @default 1
+           */
+          swipeMaxTouches: 1,
 
-            dx = (edge.from.x - edge.to.x);
-            dy = (edge.from.y - edge.to.y);
-            distance = Math.sqrt(dx * dx + dy * dy);
+          /**
+           * horizontal swipe velocity
+           * @property swipeVelocityX
+           * @type {Number}
+           * @default 0.6
+           */
+          swipeVelocityX: 0.6,
 
-            if (distance == 0) {
-              distance = 0.01;
-            }
+          /**
+           * vertical swipe velocity
+           * @property swipeVelocityY
+           * @type {Number}
+           * @default 0.6
+           */
+          swipeVelocityY: 0.6
+      },
 
-            // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-            springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+      handler: function swipeGesture(ev, inst) {
+          if(ev.eventType == EVENT_RELEASE) {
+              var touches = ev.touches.length,
+                  options = inst.options;
 
-            fx = dx * springForce;
-            fy = dy * springForce;
+              // max touches
+              if(touches < options.swipeMinTouches ||
+                  touches > options.swipeMaxTouches) {
+                  return;
+              }
 
-            edge.from.fx += fx;
-            edge.from.fy += fy;
-            edge.to.fx -= fx;
-            edge.to.fy -= fy;
+              // when the distance we moved is too small we skip this gesture
+              // or we can be already in dragging
+              if(ev.velocityX > options.swipeVelocityX ||
+                  ev.velocityY > options.swipeVelocityY) {
+                  // trigger swipe events
+                  inst.trigger(this.name, ev);
+                  inst.trigger(this.name + ev.direction, ev);
+              }
           }
-        }
       }
-    }
   };
 
-
-
-
   /**
-   * This function calculates the springforces on the nodes, accounting for the support nodes.
+   * @module gestures
+   */
+  /**
+   * Single tap and a double tap on a place
    *
-   * @private
+   * @class Tap
+   * @static
+   */
+  /**
+   * @event tap
+   * @param {Object} ev
+   */
+  /**
+   * @event doubletap
+   * @param {Object} ev
    */
-  exports._calculateSpringForcesWithSupport = function () {
-    var edgeLength, edge, edgeId, combinedClusterSize;
-    var edges = this.edges;
 
-    // forces caused by the edges, modelled as springs
-    for (edgeId in edges) {
-      if (edges.hasOwnProperty(edgeId)) {
-        edge = edges[edgeId];
-        if (edge.connected) {
-          // only calculate forces if nodes are in the same sector
-          if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
-            if (edge.via != null) {
-              var node1 = edge.to;
-              var node2 = edge.via;
-              var node3 = edge.from;
+  /**
+   * @param {String} name
+   */
+  (function(name) {
+      var hasMoved = false;
 
-              edgeLength = edge.physics.springLength;
+      function tapGesture(ev, inst) {
+          var options = inst.options,
+              current = Detection.current,
+              prev = Detection.previous,
+              sincePrev,
+              didDoubleTap;
 
-              combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
+          switch(ev.eventType) {
+              case EVENT_START:
+                  hasMoved = false;
+                  break;
 
-              // this implies that the edges between big clusters are longer
-              edgeLength += combinedClusterSize * this.constants.clustering.edgeGrowth;
-              this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
-              this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
-            }
-          }
-        }
-      }
-    }
-  };
+              case EVENT_MOVE:
+                  hasMoved = hasMoved || (ev.distance > options.tapMaxDistance);
+                  break;
 
+              case EVENT_END:
+                  if(!Utils.inStr(ev.srcEvent.type, 'cancel') && ev.deltaTime < options.tapMaxTime && !hasMoved) {
+                      // previous gesture, for the double tap since these are two different gesture detections
+                      sincePrev = prev && prev.lastEvent && ev.timeStamp - prev.lastEvent.timeStamp;
+                      didDoubleTap = false;
 
-  /**
-   * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
-   *
-   * @param node1
-   * @param node2
-   * @param edgeLength
-   * @private
-   */
-  exports._calculateSpringForce = function (node1, node2, edgeLength) {
-    var dx, dy, fx, fy, springForce, distance;
+                      // check if double tap
+                      if(prev && prev.name == name &&
+                          (sincePrev && sincePrev < options.doubleTapInterval) &&
+                          ev.distance < options.doubleTapDistance) {
+                          inst.trigger('doubletap', ev);
+                          didDoubleTap = true;
+                      }
 
-    dx = (node1.x - node2.x);
-    dy = (node1.y - node2.y);
-    distance = Math.sqrt(dx * dx + dy * dy);
+                      // do a single tap
+                      if(!didDoubleTap || options.tapAlways) {
+                          current.name = name;
+                          inst.trigger(current.name, ev);
+                      }
+                  }
+                  break;
+          }
+      }
 
-    if (distance == 0) {
-      distance = 0.01;
-    }
+      Hammer.gestures.Tap = {
+          name: name,
+          index: 100,
+          handler: tapGesture,
+          defaults: {
+              /**
+               * max time of a tap, this is for the slow tappers
+               * @property tapMaxTime
+               * @type {Number}
+               * @default 250
+               */
+              tapMaxTime: 250,
 
-    // the 1/distance is so the fx and fy can be calculated without sine or cosine.
-    springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+              /**
+               * max distance of movement of a tap, this is for the slow tappers
+               * @property tapMaxDistance
+               * @type {Number}
+               * @default 10
+               */
+              tapMaxDistance: 10,
 
-    fx = dx * springForce;
-    fy = dy * springForce;
+              /**
+               * always trigger the `tap` event, even while double-tapping
+               * @property tapAlways
+               * @type {Boolean}
+               * @default true
+               */
+              tapAlways: true,
 
-    node1.fx += fx;
-    node1.fy += fy;
-    node2.fx -= fx;
-    node2.fy -= fy;
-  };
+              /**
+               * max distance between two taps
+               * @property doubleTapDistance
+               * @type {Number}
+               * @default 20
+               */
+              doubleTapDistance: 20,
 
+              /**
+               * max time between two taps
+               * @property doubleTapInterval
+               * @type {Number}
+               * @default 300
+               */
+              doubleTapInterval: 300
+          }
+      };
+  })('tap');
 
-  exports._cleanupPhysicsConfiguration = function() {
-    if (this.physicsConfiguration !== undefined) {
-      while (this.physicsConfiguration.hasChildNodes()) {
-        this.physicsConfiguration.removeChild(this.physicsConfiguration.firstChild);
+  /**
+   * @module gestures
+   */
+  /**
+   * when a touch is being touched at the page
+   *
+   * @class Touch
+   * @static
+   */
+  /**
+   * @event touch
+   * @param {Object} ev
+   */
+  Hammer.gestures.Touch = {
+      name: 'touch',
+      index: -Infinity,
+      defaults: {
+          /**
+           * call preventDefault at touchstart, and makes the element blocking by disabling the scrolling of the page,
+           * but it improves gestures like transforming and dragging.
+           * be careful with using this, it can be very annoying for users to be stuck on the page
+           * @property preventDefault
+           * @type {Boolean}
+           * @default false
+           */
+          preventDefault: false,
+
+          /**
+           * disable mouse events, so only touch (or pen!) input triggers events
+           * @property preventMouse
+           * @type {Boolean}
+           * @default false
+           */
+          preventMouse: false
+      },
+      handler: function touchGesture(ev, inst) {
+          if(inst.options.preventMouse && ev.pointerType == POINTER_MOUSE) {
+              ev.stopDetect();
+              return;
+          }
+
+          if(inst.options.preventDefault) {
+              ev.preventDefault();
+          }
+
+          if(ev.eventType == EVENT_TOUCH) {
+              inst.trigger('touch', ev);
+          }
       }
+  };
 
-      this.physicsConfiguration.parentNode.removeChild(this.physicsConfiguration);
-      this.physicsConfiguration = undefined;
-    }
-  }
+  /**
+   * @module gestures
+   */
+  /**
+   * User want to scale or rotate with 2 fingers
+   * Preventing the default browser behavior is a good way to improve feel and working. This can be done with the
+   * `preventDefault` option.
+   *
+   * @class Transform
+   * @static
+   */
+  /**
+   * @event transform
+   * @param {Object} ev
+   */
+  /**
+   * @event transformstart
+   * @param {Object} ev
+   */
+  /**
+   * @event transformend
+   * @param {Object} ev
+   */
+  /**
+   * @event pinchin
+   * @param {Object} ev
+   */
+  /**
+   * @event pinchout
+   * @param {Object} ev
+   */
+  /**
+   * @event rotate
+   * @param {Object} ev
+   */
 
   /**
-   * Load the HTML for the physics config and bind it
-   * @private
+   * @param {String} name
    */
-  exports._loadPhysicsConfiguration = function () {
-    if (this.physicsConfiguration === undefined) {
-      this.backupConstants = {};
-      util.deepExtend(this.backupConstants,this.constants);
+  (function(name) {
+      var triggered = false;
 
-      var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
-      this.physicsConfiguration = document.createElement('div');
-      this.physicsConfiguration.className = "PhysicsConfiguration";
-      this.physicsConfiguration.innerHTML = '' +
-        '<table><tr><td><b>Simulation Mode:</b></td></tr>' +
-        '<tr>' +
-        '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod1" value="BH" checked="checked">Barnes Hut</td>' +
-        '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod2" value="R">Repulsion</td>' +
-        '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod3" value="H">Hierarchical</td>' +
-        '</tr>' +
-        '</table>' +
-        '<table id="graph_BH_table" style="display:none">' +
-        '<tr><td><b>Barnes Hut</b></td></tr>' +
-        '<tr>' +
-        '<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="0" max="20000" value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" step="25" style="width:300px" id="graph_BH_gc"></td><td  width="50px">-20000</td><td><input value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" id="graph_BH_gc_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3"  value="' + this.constants.physics.barnesHut.centralGravity + '" step="0.05"  style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this.constants.physics.barnesHut.centralGravity + '" id="graph_BH_cg_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.barnesHut.springLength + '" step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="' + this.constants.physics.barnesHut.springLength + '" id="graph_BH_sl_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.barnesHut.springConstant + '" step="0.001" style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.barnesHut.springConstant + '" id="graph_BH_sc_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.barnesHut.damping + '" step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.barnesHut.damping + '" id="graph_BH_damp_value" style="width:60px"></td>' +
-        '</tr>' +
-        '</table>' +
-        '<table id="graph_R_table" style="display:none">' +
-        '<tr><td><b>Repulsion</b></td></tr>' +
-        '<tr>' +
-        '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.repulsion.nodeDistance + '" step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.repulsion.nodeDistance + '" id="graph_R_nd_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3"  value="' + this.constants.physics.repulsion.centralGravity + '" step="0.05"  style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="' + this.constants.physics.repulsion.centralGravity + '" id="graph_R_cg_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.repulsion.springLength + '" step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="' + this.constants.physics.repulsion.springLength + '" id="graph_R_sl_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.repulsion.springConstant + '" step="0.001" style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.repulsion.springConstant + '" id="graph_R_sc_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.repulsion.damping + '" step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.repulsion.damping + '" id="graph_R_damp_value" style="width:60px"></td>' +
-        '</tr>' +
-        '</table>' +
-        '<table id="graph_H_table" style="display:none">' +
-        '<tr><td width="150"><b>Hierarchical</b></td></tr>' +
-        '<tr>' +
-        '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" id="graph_H_nd_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3"  value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" step="0.05"  style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" id="graph_H_cg_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" id="graph_H_sl_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" step="0.001" style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" id="graph_H_sc_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.hierarchicalRepulsion.damping + '" step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.damping + '" id="graph_H_damp_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="' + hierarchicalLayoutDirections.indexOf(this.constants.hierarchicalLayout.direction) + '" step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="' + this.constants.hierarchicalLayout.direction + '" id="graph_H_direction_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.levelSeparation + '" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.levelSeparation + '" id="graph_H_levsep_value" style="width:60px"></td>' +
-        '</tr>' +
-        '<tr>' +
-        '<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.nodeSpacing + '" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.nodeSpacing + '" id="graph_H_nspac_value" style="width:60px"></td>' +
-        '</tr>' +
-        '</table>' +
-        '<table><tr><td><b>Options:</b></td></tr>' +
-        '<tr>' +
-        '<td width="180px"><input type="button" id="graph_toggleSmooth" value="Toggle smoothCurves" style="width:150px"></td>' +
-        '<td width="180px"><input type="button" id="graph_repositionNodes" value="Reinitialize" style="width:150px"></td>' +
-        '<td width="180px"><input type="button" id="graph_generateOptions" value="Generate Options" style="width:150px"></td>' +
-        '</tr>' +
-        '</table>'
-      this.containerElement.parentElement.insertBefore(this.physicsConfiguration, this.containerElement);
-      this.optionsDiv = document.createElement("div");
-      this.optionsDiv.style.fontSize = "14px";
-      this.optionsDiv.style.fontFamily = "verdana";
-      this.containerElement.parentElement.insertBefore(this.optionsDiv, this.containerElement);
+      function transformGesture(ev, inst) {
+          switch(ev.eventType) {
+              case EVENT_START:
+                  triggered = false;
+                  break;
 
-      var rangeElement;
-      rangeElement = document.getElementById('graph_BH_gc');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_gc', -1, "physics_barnesHut_gravitationalConstant");
-      rangeElement = document.getElementById('graph_BH_cg');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_cg', 1, "physics_centralGravity");
-      rangeElement = document.getElementById('graph_BH_sc');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sc', 1, "physics_springConstant");
-      rangeElement = document.getElementById('graph_BH_sl');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sl', 1, "physics_springLength");
-      rangeElement = document.getElementById('graph_BH_damp');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_damp', 1, "physics_damping");
+              case EVENT_MOVE:
+                  // at least multitouch
+                  if(ev.touches.length < 2) {
+                      return;
+                  }
 
-      rangeElement = document.getElementById('graph_R_nd');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_nd', 1, "physics_repulsion_nodeDistance");
-      rangeElement = document.getElementById('graph_R_cg');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_cg', 1, "physics_centralGravity");
-      rangeElement = document.getElementById('graph_R_sc');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sc', 1, "physics_springConstant");
-      rangeElement = document.getElementById('graph_R_sl');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sl', 1, "physics_springLength");
-      rangeElement = document.getElementById('graph_R_damp');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_damp', 1, "physics_damping");
+                  var scaleThreshold = Math.abs(1 - ev.scale);
+                  var rotationThreshold = Math.abs(ev.rotation);
 
-      rangeElement = document.getElementById('graph_H_nd');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
-      rangeElement = document.getElementById('graph_H_cg');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_cg', 1, "physics_centralGravity");
-      rangeElement = document.getElementById('graph_H_sc');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sc', 1, "physics_springConstant");
-      rangeElement = document.getElementById('graph_H_sl');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sl', 1, "physics_springLength");
-      rangeElement = document.getElementById('graph_H_damp');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_damp', 1, "physics_damping");
-      rangeElement = document.getElementById('graph_H_direction');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_direction', hierarchicalLayoutDirections, "hierarchicalLayout_direction");
-      rangeElement = document.getElementById('graph_H_levsep');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_levsep', 1, "hierarchicalLayout_levelSeparation");
-      rangeElement = document.getElementById('graph_H_nspac');
-      rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nspac', 1, "hierarchicalLayout_nodeSpacing");
+                  // when the distance we moved is too small we skip this gesture
+                  // or we can be already in dragging
+                  if(scaleThreshold < inst.options.transformMinScale &&
+                      rotationThreshold < inst.options.transformMinRotation) {
+                      return;
+                  }
 
-      var radioButton1 = document.getElementById("graph_physicsMethod1");
-      var radioButton2 = document.getElementById("graph_physicsMethod2");
-      var radioButton3 = document.getElementById("graph_physicsMethod3");
-      radioButton2.checked = true;
-      if (this.constants.physics.barnesHut.enabled) {
-        radioButton1.checked = true;
-      }
-      if (this.constants.hierarchicalLayout.enabled) {
-        radioButton3.checked = true;
-      }
+                  // we are transforming!
+                  Detection.current.name = name;
 
-      var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-      var graph_repositionNodes = document.getElementById("graph_repositionNodes");
-      var graph_generateOptions = document.getElementById("graph_generateOptions");
+                  // first time, trigger dragstart event
+                  if(!triggered) {
+                      inst.trigger(name + 'start', ev);
+                      triggered = true;
+                  }
 
-      graph_toggleSmooth.onclick = graphToggleSmoothCurves.bind(this);
-      graph_repositionNodes.onclick = graphRepositionNodes.bind(this);
-      graph_generateOptions.onclick = graphGenerateOptions.bind(this);
-      if (this.constants.smoothCurves == true && this.constants.dynamicSmoothCurves == false) {
-        graph_toggleSmooth.style.background = "#A4FF56";
-      }
-      else {
-        graph_toggleSmooth.style.background = "#FF8532";
-      }
+                  inst.trigger(name, ev); // basic transform event
 
+                  // trigger rotate event
+                  if(rotationThreshold > inst.options.transformMinRotation) {
+                      inst.trigger('rotate', ev);
+                  }
 
-      switchConfigurations.apply(this);
+                  // trigger pinch event
+                  if(scaleThreshold > inst.options.transformMinScale) {
+                      inst.trigger('pinch', ev);
+                      inst.trigger('pinch' + (ev.scale < 1 ? 'in' : 'out'), ev);
+                  }
+                  break;
 
-      radioButton1.onchange = switchConfigurations.bind(this);
-      radioButton2.onchange = switchConfigurations.bind(this);
-      radioButton3.onchange = switchConfigurations.bind(this);
-    }
-  };
+              case EVENT_RELEASE:
+                  if(triggered && ev.changedLength < 2) {
+                      inst.trigger(name + 'end', ev);
+                      triggered = false;
+                  }
+                  break;
+          }
+      }
 
-  /**
-   * This overwrites the this.constants.
-   *
-   * @param constantsVariableName
-   * @param value
-   * @private
-   */
-  exports._overWriteGraphConstants = function (constantsVariableName, value) {
-    var nameArray = constantsVariableName.split("_");
-    if (nameArray.length == 1) {
-      this.constants[nameArray[0]] = value;
-    }
-    else if (nameArray.length == 2) {
-      this.constants[nameArray[0]][nameArray[1]] = value;
-    }
-    else if (nameArray.length == 3) {
-      this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
-    }
-  };
+      Hammer.gestures.Transform = {
+          name: name,
+          index: 45,
+          defaults: {
+              /**
+               * minimal scale factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
+               * @property transformMinScale
+               * @type {Number}
+               * @default 0.01
+               */
+              transformMinScale: 0.01,
+
+              /**
+               * rotation in degrees
+               * @property transformMinRotation
+               * @type {Number}
+               * @default 1
+               */
+              transformMinRotation: 1
+          },
 
+          handler: transformGesture
+      };
+  })('transform');
 
   /**
-   * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
+   * @module hammer
    */
-  function graphToggleSmoothCurves () {
-    this.constants.smoothCurves.enabled = !this.constants.smoothCurves.enabled;
-    var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-    if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
-    else                                     {graph_toggleSmooth.style.background = "#FF8532";}
 
-    this._configureSmoothCurves(false);
+  // AMD export
+  if(true) {
+      !(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
+          return Hammer;
+      }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+  // commonjs export
+  } else if(typeof module !== 'undefined' && module.exports) {
+      module.exports = Hammer;
+  // browser export
+  } else {
+      window.Hammer = Hammer;
   }
 
-  /**
-   * this function is used to scramble the nodes
-   *
-   */
-  function graphRepositionNodes () {
-    for (var nodeId in this.calculationNodes) {
-      if (this.calculationNodes.hasOwnProperty(nodeId)) {
-        this.calculationNodes[nodeId].vx = 0;  this.calculationNodes[nodeId].vy = 0;
-        this.calculationNodes[nodeId].fx = 0;  this.calculationNodes[nodeId].fy = 0;
-      }
-    }
-    if (this.constants.hierarchicalLayout.enabled == true) {
-      this._setupHierarchicalLayout();
-      showValueOfRange.call(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
-      showValueOfRange.call(this, 'graph_H_cg', 1, "physics_centralGravity");
-      showValueOfRange.call(this, 'graph_H_sc', 1, "physics_springConstant");
-      showValueOfRange.call(this, 'graph_H_sl', 1, "physics_springLength");
-      showValueOfRange.call(this, 'graph_H_damp', 1, "physics_damping");
-    }
-    else {
-      this.repositionNodes();
-    }
-    this.moving = true;
-    this.start();
-  }
+  })(window);
 
-  /**
-   *  this is used to generate an options file from the playing with physics system.
-   */
-  function graphGenerateOptions () {
-    var options = "No options are required, default values used.";
-    var optionsSpecific = [];
-    var radioButton1 = document.getElementById("graph_physicsMethod1");
-    var radioButton2 = document.getElementById("graph_physicsMethod2");
-    if (radioButton1.checked == true) {
-      if (this.constants.physics.barnesHut.gravitationalConstant != this.backupConstants.physics.barnesHut.gravitationalConstant) {optionsSpecific.push("gravitationalConstant: " + this.constants.physics.barnesHut.gravitationalConstant);}
-      if (this.constants.physics.centralGravity != this.backupConstants.physics.barnesHut.centralGravity)                         {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
-      if (this.constants.physics.springLength != this.backupConstants.physics.barnesHut.springLength)                             {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
-      if (this.constants.physics.springConstant != this.backupConstants.physics.barnesHut.springConstant)                         {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
-      if (this.constants.physics.damping != this.backupConstants.physics.barnesHut.damping)                                       {optionsSpecific.push("damping: " + this.constants.physics.damping);}
-      if (optionsSpecific.length != 0) {
-        options = "var options = {";
-        options += "physics: {barnesHut: {";
-        for (var i = 0; i < optionsSpecific.length; i++) {
-          options += optionsSpecific[i];
-          if (i < optionsSpecific.length - 1) {
-            options += ", "
-          }
-        }
-        options += '}}'
-      }
-      if (this.constants.smoothCurves.enabled != this.backupConstants.smoothCurves.enabled) {
-        if (optionsSpecific.length == 0) {options = "var options = {";}
-        else {options += ", "}
-        options += "smoothCurves: " + this.constants.smoothCurves.enabled;
-      }
-      if (options != "No options are required, default values used.") {
-        options += '};'
-      }
-    }
-    else if (radioButton2.checked == true) {
-      options = "var options = {";
-      options += "physics: {barnesHut: {enabled: false}";
-      if (this.constants.physics.repulsion.nodeDistance != this.backupConstants.physics.repulsion.nodeDistance)  {optionsSpecific.push("nodeDistance: " + this.constants.physics.repulsion.nodeDistance);}
-      if (this.constants.physics.centralGravity != this.backupConstants.physics.repulsion.centralGravity)        {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
-      if (this.constants.physics.springLength != this.backupConstants.physics.repulsion.springLength)            {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
-      if (this.constants.physics.springConstant != this.backupConstants.physics.repulsion.springConstant)        {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
-      if (this.constants.physics.damping != this.backupConstants.physics.repulsion.damping)                      {optionsSpecific.push("damping: " + this.constants.physics.damping);}
-      if (optionsSpecific.length != 0) {
-        options += ", repulsion: {";
-        for (var i = 0; i < optionsSpecific.length; i++) {
-          options += optionsSpecific[i];
-          if (i < optionsSpecific.length - 1) {
-            options += ", "
-          }
-        }
-        options += '}}'
-      }
-      if (optionsSpecific.length == 0) {options += "}"}
-      if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
-        options += ", smoothCurves: " + this.constants.smoothCurves;
-      }
-      options += '};'
-    }
-    else {
-      options = "var options = {";
-      if (this.constants.physics.hierarchicalRepulsion.nodeDistance != this.backupConstants.physics.hierarchicalRepulsion.nodeDistance)  {optionsSpecific.push("nodeDistance: " + this.constants.physics.hierarchicalRepulsion.nodeDistance);}
-      if (this.constants.physics.centralGravity != this.backupConstants.physics.hierarchicalRepulsion.centralGravity)        {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
-      if (this.constants.physics.springLength != this.backupConstants.physics.hierarchicalRepulsion.springLength)            {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
-      if (this.constants.physics.springConstant != this.backupConstants.physics.hierarchicalRepulsion.springConstant)        {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
-      if (this.constants.physics.damping != this.backupConstants.physics.hierarchicalRepulsion.damping)                      {optionsSpecific.push("damping: " + this.constants.physics.damping);}
-      if (optionsSpecific.length != 0) {
-        options += "physics: {hierarchicalRepulsion: {";
-        for (var i = 0; i < optionsSpecific.length; i++) {
-          options += optionsSpecific[i];
-          if (i < optionsSpecific.length - 1) {
-            options += ", ";
-          }
-        }
-        options += '}},';
-      }
-      options += 'hierarchicalLayout: {';
-      optionsSpecific = [];
-      if (this.constants.hierarchicalLayout.direction != this.backupConstants.hierarchicalLayout.direction)                       {optionsSpecific.push("direction: " + this.constants.hierarchicalLayout.direction);}
-      if (Math.abs(this.constants.hierarchicalLayout.levelSeparation) != this.backupConstants.hierarchicalLayout.levelSeparation) {optionsSpecific.push("levelSeparation: " + this.constants.hierarchicalLayout.levelSeparation);}
-      if (this.constants.hierarchicalLayout.nodeSpacing != this.backupConstants.hierarchicalLayout.nodeSpacing)                   {optionsSpecific.push("nodeSpacing: " + this.constants.hierarchicalLayout.nodeSpacing);}
-      if (optionsSpecific.length != 0) {
-        for (var i = 0; i < optionsSpecific.length; i++) {
-          options += optionsSpecific[i];
-          if (i < optionsSpecific.length - 1) {
-            options += ", "
-          }
-        }
-        options += '}'
-      }
-      else {
-        options += "enabled:true}";
-      }
-      options += '};'
-    }
-
-
-    this.optionsDiv.innerHTML = options;
-  }
+/***/ },
+/* 66 */
+/***/ function(module, exports, __webpack_require__) {
 
-  /**
-   * this is used to switch between barnesHut, repulsion and hierarchical.
-   *
-   */
-  function switchConfigurations () {
-    var ids = ["graph_BH_table", "graph_R_table", "graph_H_table"];
-    var radioButton = document.querySelector('input[name="graph_physicsMethod"]:checked').value;
-    var tableId = "graph_" + radioButton + "_table";
-    var table = document.getElementById(tableId);
-    table.style.display = "block";
-    for (var i = 0; i < ids.length; i++) {
-      if (ids[i] != tableId) {
-        table = document.getElementById(ids[i]);
-        table.style.display = "none";
-      }
-    }
-    this._restoreNodes();
-    if (radioButton == "R") {
-      this.constants.hierarchicalLayout.enabled = false;
-      this.constants.physics.hierarchicalRepulsion.enabled = false;
-      this.constants.physics.barnesHut.enabled = false;
-    }
-    else if (radioButton == "H") {
-      if (this.constants.hierarchicalLayout.enabled == false) {
-        this.constants.hierarchicalLayout.enabled = true;
-        this.constants.physics.hierarchicalRepulsion.enabled = true;
-        this.constants.physics.barnesHut.enabled = false;
-        this.constants.smoothCurves.enabled = false;
-        this._setupHierarchicalLayout();
-      }
-    }
-    else {
-      this.constants.hierarchicalLayout.enabled = false;
-      this.constants.physics.hierarchicalRepulsion.enabled = false;
-      this.constants.physics.barnesHut.enabled = true;
-    }
-    this._loadSelectedForceSolver();
-    var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
-    if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
-    else                                     {graph_toggleSmooth.style.background = "#FF8532";}
-    this.moving = true;
-    this.start();
-  }
+  var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
+  //! version : 2.9.0
+  //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+  //! license : MIT
+  //! momentjs.com
 
+  (function (undefined) {
+      /************************************
+          Constants
+      ************************************/
 
-  /**
-   * this generates the ranges depending on the iniital values.
-   *
-   * @param id
-   * @param map
-   * @param constantsVariableName
-   */
-  function showValueOfRange (id,map,constantsVariableName) {
-    var valueId = id + "_value";
-    var rangeValue = document.getElementById(id).value;
+      var moment,
+          VERSION = '2.9.0',
+          // the global-scope this is NOT the global object in Node.js
+          globalScope = (typeof global !== 'undefined' && (typeof window === 'undefined' || window === global.window)) ? global : this,
+          oldGlobalMoment,
+          round = Math.round,
+          hasOwnProperty = Object.prototype.hasOwnProperty,
+          i,
 
-    if (Array.isArray(map)) {
-      document.getElementById(valueId).value = map[parseInt(rangeValue)];
-      this._overWriteGraphConstants(constantsVariableName,map[parseInt(rangeValue)]);
-    }
-    else {
-      document.getElementById(valueId).value = parseInt(map) * parseFloat(rangeValue);
-      this._overWriteGraphConstants(constantsVariableName, parseInt(map) * parseFloat(rangeValue));
-    }
+          YEAR = 0,
+          MONTH = 1,
+          DATE = 2,
+          HOUR = 3,
+          MINUTE = 4,
+          SECOND = 5,
+          MILLISECOND = 6,
 
-    if (constantsVariableName == "hierarchicalLayout_direction" ||
-      constantsVariableName == "hierarchicalLayout_levelSeparation" ||
-      constantsVariableName == "hierarchicalLayout_nodeSpacing") {
-      this._setupHierarchicalLayout();
-    }
-    this.moving = true;
-    this.start();
-  }
+          // internal storage for locale config files
+          locales = {},
 
+          // extra moment internal properties (plugins register props here)
+          momentProperties = [],
 
+          // check for nodeJS
+          hasModule = (typeof module !== 'undefined' && module && module.exports),
 
+          // ASP.NET json date format regex
+          aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
+          aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
 
-/***/ },
-/* 61 */
-/***/ function(module, exports, __webpack_require__) {
+          // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html
+          // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere
+          isoDurationRegex = /^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/,
 
-  /**
-   * Creation of the ClusterMixin var.
-   *
-   * This contains all the functions the Network object can use to employ clustering
-   */
+          // format tokens
+          formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Q|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|x|X|zz?|ZZ?|.)/g,
+          localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g,
 
-  /**
-  * This is only called in the constructor of the network object
-  *
-  */
-  exports.startWithClustering = function() {
-   // cluster if the data set is big
-   this.clusterToFit(this.constants.clustering.initialMaxNodes, true);
+          // parsing token regexes
+          parseTokenOneOrTwoDigits = /\d\d?/, // 0 - 99
+          parseTokenOneToThreeDigits = /\d{1,3}/, // 0 - 999
+          parseTokenOneToFourDigits = /\d{1,4}/, // 0 - 9999
+          parseTokenOneToSixDigits = /[+\-]?\d{1,6}/, // -999,999 - 999,999
+          parseTokenDigits = /\d+/, // nonzero number of digits
+          parseTokenWord = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i, // any word (or two) characters or numbers including two/three word month in arabic.
+          parseTokenTimezone = /Z|[\+\-]\d\d:?\d\d/gi, // +00:00 -00:00 +0000 -0000 or Z
+          parseTokenT = /T/i, // T (ISO separator)
+          parseTokenOffsetMs = /[\+\-]?\d+/, // 1234567890123
+          parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
 
-   // updates the lables after clustering
-   this.updateLabels();
+          //strict parsing regexes
+          parseTokenOneDigit = /\d/, // 0 - 9
+          parseTokenTwoDigits = /\d\d/, // 00 - 99
+          parseTokenThreeDigits = /\d{3}/, // 000 - 999
+          parseTokenFourDigits = /\d{4}/, // 0000 - 9999
+          parseTokenSixDigits = /[+-]?\d{6}/, // -999,999 - 999,999
+          parseTokenSignedNumber = /[+-]?\d+/, // -inf - inf
 
-   // this is called here because if clusterin is disabled, the start and stabilize are called in
-   // the setData function.
-   if (this.stabilize) {
-     this._stabilize();
-   }
-   this.start();
-  };
+          // iso 8601 regex
+          // 0000-00-00 0000-W00 or 0000-W00-0 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 or +00)
+          isoRegex = /^\s*(?:[+-]\d{6}|\d{4})-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/,
 
-  /**
-   * This function clusters until the initialMaxNodes has been reached
-   *
-   * @param {Number}  maxNumberOfNodes
-   * @param {Boolean} reposition
-   */
-  exports.clusterToFit = function(maxNumberOfNodes, reposition) {
-    var numberOfNodes = this.nodeIndices.length;
+          isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
 
-    var maxLevels = 2;
-    var level = 0;
+          isoDates = [
+              ['YYYYYY-MM-DD', /[+-]\d{6}-\d{2}-\d{2}/],
+              ['YYYY-MM-DD', /\d{4}-\d{2}-\d{2}/],
+              ['GGGG-[W]WW-E', /\d{4}-W\d{2}-\d/],
+              ['GGGG-[W]WW', /\d{4}-W\d{2}/],
+              ['YYYY-DDD', /\d{4}-\d{3}/]
+          ],
 
-    // we first cluster the hubs, then we pull in the outliers, repeat
-    while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-      console.log("Performing clustering:", level, numberOfNodes, this.clusterSession);
-      if (level % 3 == 0.0) {
-        //this.forceAggregateHubs(true);
-        //this.normalizeClusterLevels();
-      }
-      else {
-        //this.increaseClusterLevel(); // this also includes a cluster normalization
-      }
-      //this.forceAggregateHubs(true);
-      numberOfNodes = this.nodeIndices.length;
-      level += 1;
-    }
-    console.log("finished")
+          // iso time formats and regexes
+          isoTimes = [
+              ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d+/],
+              ['HH:mm:ss', /(T| )\d\d:\d\d:\d\d/],
+              ['HH:mm', /(T| )\d\d:\d\d/],
+              ['HH', /(T| )\d\d/]
+          ],
 
-    // after the clustering we reposition the nodes to reduce the initial chaos
-    if (level > 0 && reposition == true) {
-      this.repositionNodes();
-    }
-    this._updateCalculationNodes();
-  };
+          // timezone chunker '+10:00' > ['10', '00'] or '-1530' > ['-', '15', '30']
+          parseTimezoneChunker = /([\+\-]|\d\d)/gi,
 
-  /**
-   * This function can be called to open up a specific cluster. It is only called by
-   * It will unpack the cluster back one level.
-   *
-   * @param node    | Node object: cluster to open.
-   */
-  exports.openCluster = function(node) {
-    var isMovingBeforeClustering = this.moving;
-    if (node.clusterSize > this.constants.clustering.sectorThreshold && this._nodeInActiveArea(node) &&
-      !(this._sector() == "default" && this.nodeIndices.length == 1)) {
-      // this loads a new sector, loads the nodes and edges and nodeIndices of it.
-      this._addSector(node);
-      var level = 0;
+          // getter and setter names
+          proxyGettersAndSetters = 'Date|Hours|Minutes|Seconds|Milliseconds'.split('|'),
+          unitMillisecondFactors = {
+              'Milliseconds' : 1,
+              'Seconds' : 1e3,
+              'Minutes' : 6e4,
+              'Hours' : 36e5,
+              'Days' : 864e5,
+              'Months' : 2592e6,
+              'Years' : 31536e6
+          },
 
-      // we decluster until we reach a decent number of nodes
-      while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
-        this.decreaseClusterLevel();
-        level += 1;
-      }
+          unitAliases = {
+              ms : 'millisecond',
+              s : 'second',
+              m : 'minute',
+              h : 'hour',
+              d : 'day',
+              D : 'date',
+              w : 'week',
+              W : 'isoWeek',
+              M : 'month',
+              Q : 'quarter',
+              y : 'year',
+              DDD : 'dayOfYear',
+              e : 'weekday',
+              E : 'isoWeekday',
+              gg: 'weekYear',
+              GG: 'isoWeekYear'
+          },
 
-    }
-    else {
-      this._expandClusterNode(node,false,true);
+          camelFunctions = {
+              dayofyear : 'dayOfYear',
+              isoweekday : 'isoWeekday',
+              isoweek : 'isoWeek',
+              weekyear : 'weekYear',
+              isoweekyear : 'isoWeekYear'
+          },
 
-      // update the index list, dynamic edges and labels
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      this._updateCalculationNodes();
-      this.updateLabels();
-    }
+          // format function strings
+          formatFunctions = {},
 
-    // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-    if (this.moving != isMovingBeforeClustering) {
-      this.start();
-    }
-  };
+          // default relative time thresholds
+          relativeTimeThresholds = {
+              s: 45,  // seconds to minute
+              m: 45,  // minutes to hour
+              h: 22,  // hours to day
+              d: 26,  // days to month
+              M: 11   // months to year
+          },
 
+          // tokens to ordinalize and pad
+          ordinalizeTokens = 'DDD w W M D d'.split(' '),
+          paddedTokens = 'M D H h m s w W'.split(' '),
 
-  /**
-   * This calls the updateClustes with default arguments
-   */
-  exports.updateClustersDefault = function() {
-    if (this.constants.clustering.enabled == true && this.constants.clustering.clusterByZoom == true) {
-      this.updateClusters(0,false,false);
-    }
-  };
+          formatTokenFunctions = {
+              M    : function () {
+                  return this.month() + 1;
+              },
+              MMM  : function (format) {
+                  return this.localeData().monthsShort(this, format);
+              },
+              MMMM : function (format) {
+                  return this.localeData().months(this, format);
+              },
+              D    : function () {
+                  return this.date();
+              },
+              DDD  : function () {
+                  return this.dayOfYear();
+              },
+              d    : function () {
+                  return this.day();
+              },
+              dd   : function (format) {
+                  return this.localeData().weekdaysMin(this, format);
+              },
+              ddd  : function (format) {
+                  return this.localeData().weekdaysShort(this, format);
+              },
+              dddd : function (format) {
+                  return this.localeData().weekdays(this, format);
+              },
+              w    : function () {
+                  return this.week();
+              },
+              W    : function () {
+                  return this.isoWeek();
+              },
+              YY   : function () {
+                  return leftZeroFill(this.year() % 100, 2);
+              },
+              YYYY : function () {
+                  return leftZeroFill(this.year(), 4);
+              },
+              YYYYY : function () {
+                  return leftZeroFill(this.year(), 5);
+              },
+              YYYYYY : function () {
+                  var y = this.year(), sign = y >= 0 ? '+' : '-';
+                  return sign + leftZeroFill(Math.abs(y), 6);
+              },
+              gg   : function () {
+                  return leftZeroFill(this.weekYear() % 100, 2);
+              },
+              gggg : function () {
+                  return leftZeroFill(this.weekYear(), 4);
+              },
+              ggggg : function () {
+                  return leftZeroFill(this.weekYear(), 5);
+              },
+              GG   : function () {
+                  return leftZeroFill(this.isoWeekYear() % 100, 2);
+              },
+              GGGG : function () {
+                  return leftZeroFill(this.isoWeekYear(), 4);
+              },
+              GGGGG : function () {
+                  return leftZeroFill(this.isoWeekYear(), 5);
+              },
+              e : function () {
+                  return this.weekday();
+              },
+              E : function () {
+                  return this.isoWeekday();
+              },
+              a    : function () {
+                  return this.localeData().meridiem(this.hours(), this.minutes(), true);
+              },
+              A    : function () {
+                  return this.localeData().meridiem(this.hours(), this.minutes(), false);
+              },
+              H    : function () {
+                  return this.hours();
+              },
+              h    : function () {
+                  return this.hours() % 12 || 12;
+              },
+              m    : function () {
+                  return this.minutes();
+              },
+              s    : function () {
+                  return this.seconds();
+              },
+              S    : function () {
+                  return toInt(this.milliseconds() / 100);
+              },
+              SS   : function () {
+                  return leftZeroFill(toInt(this.milliseconds() / 10), 2);
+              },
+              SSS  : function () {
+                  return leftZeroFill(this.milliseconds(), 3);
+              },
+              SSSS : function () {
+                  return leftZeroFill(this.milliseconds(), 3);
+              },
+              Z    : function () {
+                  var a = this.utcOffset(),
+                      b = '+';
+                  if (a < 0) {
+                      a = -a;
+                      b = '-';
+                  }
+                  return b + leftZeroFill(toInt(a / 60), 2) + ':' + leftZeroFill(toInt(a) % 60, 2);
+              },
+              ZZ   : function () {
+                  var a = this.utcOffset(),
+                      b = '+';
+                  if (a < 0) {
+                      a = -a;
+                      b = '-';
+                  }
+                  return b + leftZeroFill(toInt(a / 60), 2) + leftZeroFill(toInt(a) % 60, 2);
+              },
+              z : function () {
+                  return this.zoneAbbr();
+              },
+              zz : function () {
+                  return this.zoneName();
+              },
+              x    : function () {
+                  return this.valueOf();
+              },
+              X    : function () {
+                  return this.unix();
+              },
+              Q : function () {
+                  return this.quarter();
+              }
+          },
 
+          deprecations = {},
 
-  /**
-   * This function can be called to increase the cluster level. This means that the nodes with only one edge connection will
-   * be clustered with their connected node. This can be repeated as many times as needed.
-   * This can be called externally (by a keybind for instance) to reduce the complexity of big datasets.
-   */
-  exports.increaseClusterLevel = function() {
-    this.updateClusters(-1,false,true);
-  };
+          lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'],
 
+          updateInProgress = false;
 
-  /**
-   * This function can be called to decrease the cluster level. This means that the nodes with only one edge connection will
-   * be unpacked if they are a cluster. This can be repeated as many times as needed.
-   * This can be called externally (by a key-bind for instance) to look into clusters without zooming.
-   */
-  exports.decreaseClusterLevel = function() {
-    this.updateClusters(1,false,true);
-  };
+      // Pick the first defined of two or three arguments. dfl comes from
+      // default.
+      function dfl(a, b, c) {
+          switch (arguments.length) {
+              case 2: return a != null ? a : b;
+              case 3: return a != null ? a : b != null ? b : c;
+              default: throw new Error('Implement me');
+          }
+      }
 
+      function hasOwnProp(a, b) {
+          return hasOwnProperty.call(a, b);
+      }
 
-  /**
-   * This is the main clustering function. It clusters and declusters on zoom or forced
-   * This function clusters on zoom, it can be called with a predefined zoom direction
-   * If out, check if we can form clusters, if in, check if we can open clusters.
-   * This function is only called from _zoom()
-   *
-   * @param {Number} zoomDirection  | -1 / 0 / +1   for  zoomOut / determineByZoom / zoomIn
-   * @param {Boolean} recursive     | enabled or disable recursive calling of the opening of clusters
-   * @param {Boolean} force         | enabled or disable forcing
-   * @param {Boolean} doNotStart    | if true do not call start
-   *
-   */
-  exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
-
-    // on zoom out collapse the sector if the scale is at the level the sector was made
-    if (this.previousScale > this.scale && zoomDirection == 0) {
-      this._collapseSector();
-    }
-
-    // check if we zoom in or out
-    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
-      // forming clusters when forced pulls outliers in. When not forced, the edge length of the
-      // outer nodes determines if it is being clustered
-      this._formClusters(force);
-    }
-    else if (this.previousScale < this.scale || zoomDirection == 1) { // zoom in
-      if (force == true) {
-        // _openClusters checks for each node if the formationScale of the cluster is smaller than
-        // the current scale and if so, declusters. When forced, all clusters are reduced by one step
-        this._openClusters(recursive,force);
-      }
-      else {
-        // if a cluster takes up a set percentage of the active window
-        this._openClustersBySize();
+      function defaultParsingFlags() {
+          // We need to deep clone this object, and es5 standard is not very
+          // helpful.
+          return {
+              empty : false,
+              unusedTokens : [],
+              unusedInput : [],
+              overflow : -2,
+              charsLeftOver : 0,
+              nullInput : false,
+              invalidMonth : null,
+              invalidFormat : false,
+              userInvalidated : false,
+              iso: false
+          };
       }
-    }
-    this._updateNodeIndexList();
-
-    // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
-    if (this.nodeIndices.length == amountOfNodes && (this.previousScale > this.scale || zoomDirection == -1))  {
-      this._aggregateHubs(force);
-      this._updateNodeIndexList();
-    }
-
-    // we now reduce chains.
-    if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
-      this.handleChains();
-      this._updateNodeIndexList();
-    }
-
-    this.previousScale = this.scale;
 
-    // rest of the update the index list, dynamic edges and labels
-    this._updateDynamicEdges();
-    this.updateLabels();
+      function printMsg(msg) {
+          if (moment.suppressDeprecationWarnings === false &&
+                  typeof console !== 'undefined' && console.warn) {
+              console.warn('Deprecation warning: ' + msg);
+          }
+      }
 
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length < amountOfNodes) { // this means a clustering operation has taken place
-      this.clusterSession += 1;
-      // if clusters have been made, we normalize the cluster level
-      this.normalizeClusterLevels();
-    }
+      function deprecate(msg, fn) {
+          var firstTime = true;
+          return extend(function () {
+              if (firstTime) {
+                  printMsg(msg);
+                  firstTime = false;
+              }
+              return fn.apply(this, arguments);
+          }, fn);
+      }
 
-    if (doNotStart == false || doNotStart === undefined) {
-      // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-      if (this.moving != isMovingBeforeClustering) {
-        this.start();
+      function deprecateSimple(name, msg) {
+          if (!deprecations[name]) {
+              printMsg(msg);
+              deprecations[name] = true;
+          }
       }
-    }
 
-    this._updateCalculationNodes();
-  };
+      function padToken(func, count) {
+          return function (a) {
+              return leftZeroFill(func.call(this, a), count);
+          };
+      }
+      function ordinalizeToken(func, period) {
+          return function (a) {
+              return this.localeData().ordinal(func.call(this, a), period);
+          };
+      }
 
-  /**
-   * This function handles the chains. It is called on every updateClusters().
-   */
-  exports.handleChains = function() {
-    // after clustering we check how many chains there are
-    var chainPercentage = this._getChainFraction();
-    if (chainPercentage > this.constants.clustering.chainThreshold) {
-      this._reduceAmountOfChains(1 - this.constants.clustering.chainThreshold / chainPercentage)
+      function monthDiff(a, b) {
+          // difference in months
+          var wholeMonthDiff = ((b.year() - a.year()) * 12) + (b.month() - a.month()),
+              // b is in (anchor - 1 month, anchor + 1 month)
+              anchor = a.clone().add(wholeMonthDiff, 'months'),
+              anchor2, adjust;
 
-    }
-  };
+          if (b - anchor < 0) {
+              anchor2 = a.clone().add(wholeMonthDiff - 1, 'months');
+              // linear across the month
+              adjust = (b - anchor) / (anchor - anchor2);
+          } else {
+              anchor2 = a.clone().add(wholeMonthDiff + 1, 'months');
+              // linear across the month
+              adjust = (b - anchor) / (anchor2 - anchor);
+          }
 
-  /**
-   * this functions starts clustering by hubs
-   * The minimum hub threshold is set globally
-   *
-   * @private
-   */
-  exports._aggregateHubs = function(force) {
-    this._getHubSize();
-    this._formClustersByHub(force,false);
-  };
+          return -(wholeMonthDiff + adjust);
+      }
 
+      while (ordinalizeTokens.length) {
+          i = ordinalizeTokens.pop();
+          formatTokenFunctions[i + 'o'] = ordinalizeToken(formatTokenFunctions[i], i);
+      }
+      while (paddedTokens.length) {
+          i = paddedTokens.pop();
+          formatTokenFunctions[i + i] = padToken(formatTokenFunctions[i], 2);
+      }
+      formatTokenFunctions.DDDD = padToken(formatTokenFunctions.DDD, 3);
 
-  /**
-   * This function forces hubs to form.
-   *
-   */
-  exports.forceAggregateHubs = function(doNotStart) {
-    var isMovingBeforeClustering = this.moving;
-    var amountOfNodes = this.nodeIndices.length;
 
-    this._aggregateHubs(true);
+      function meridiemFixWrap(locale, hour, meridiem) {
+          var isPm;
 
-    // update the index list, dynamic edges and labels
-    this._updateNodeIndexList();
-    this._updateCalculationNodes();
-    this._updateDynamicEdges();
-    this.updateLabels();
+          if (meridiem == null) {
+              // nothing to do
+              return hour;
+          }
+          if (locale.meridiemHour != null) {
+              return locale.meridiemHour(hour, meridiem);
+          } else if (locale.isPM != null) {
+              // Fallback
+              isPm = locale.isPM(meridiem);
+              if (isPm && hour < 12) {
+                  hour += 12;
+              }
+              if (!isPm && hour === 12) {
+                  hour = 0;
+              }
+              return hour;
+          } else {
+              // thie is not supposed to happen
+              return hour;
+          }
+      }
 
-    // if a cluster was formed, we increase the clusterSession
-    if (this.nodeIndices.length != amountOfNodes) {
-      this.clusterSession += 1;
-    }
+      /************************************
+          Constructors
+      ************************************/
 
-    if (doNotStart == false || doNotStart === undefined) {
-      // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
-      if (this.moving != isMovingBeforeClustering) {
-        this.start();
+      function Locale() {
       }
-    }
-  };
 
-  /**
-   * If a cluster takes up more than a set percentage of the screen, open the cluster
-   *
-   * @private
-   */
-  exports._openClustersBySize = function() {
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var node = this.nodes[nodeId];
-        if (node.inView() == true) {
-          if ((node.width*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
-              (node.height*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
-            this.openCluster(node);
+      // Moment prototype object
+      function Moment(config, skipOverflow) {
+          if (skipOverflow !== false) {
+              checkOverflow(config);
+          }
+          copyConfig(this, config);
+          this._d = new Date(+config._d);
+          // Prevent infinite loop in case updateOffset creates new moment
+          // objects.
+          if (updateInProgress === false) {
+              updateInProgress = true;
+              moment.updateOffset(this);
+              updateInProgress = false;
           }
-        }
       }
-    }
-  };
 
+      // Duration Constructor
+      function Duration(duration) {
+          var normalizedInput = normalizeObjectUnits(duration),
+              years = normalizedInput.year || 0,
+              quarters = normalizedInput.quarter || 0,
+              months = normalizedInput.month || 0,
+              weeks = normalizedInput.week || 0,
+              days = normalizedInput.day || 0,
+              hours = normalizedInput.hour || 0,
+              minutes = normalizedInput.minute || 0,
+              seconds = normalizedInput.second || 0,
+              milliseconds = normalizedInput.millisecond || 0;
 
-  /**
-   * This function loops over all nodes in the nodeIndices list. For each node it checks if it is a cluster and if it
-   * has to be opened based on the current zoom level.
-   *
-   * @private
-   */
-  exports._openClusters = function(recursive,force) {
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      var node = this.nodes[this.nodeIndices[i]];
-      this._expandClusterNode(node,recursive,force);
-      this._updateCalculationNodes();
-    }
-  };
+          // representation for dateAddRemove
+          this._milliseconds = +milliseconds +
+              seconds * 1e3 + // 1000
+              minutes * 6e4 + // 1000 * 60
+              hours * 36e5; // 1000 * 60 * 60
+          // Because of dateAddRemove treats 24 hours as different from a
+          // day when working around DST, we need to store them separately
+          this._days = +days +
+              weeks * 7;
+          // It is impossible translate months into days without knowing
+          // which months you are are talking about, so we have to store
+          // it separately.
+          this._months = +months +
+              quarters * 3 +
+              years * 12;
 
-  /**
-   * This function checks if a node has to be opened. This is done by checking the zoom level.
-   * If the node contains child nodes, this function is recursively called on the child nodes as well.
-   * This recursive behaviour is optional and can be set by the recursive argument.
-   *
-   * @param {Node}    parentNode    | to check for cluster and expand
-   * @param {Boolean} recursive     | enabled or disable recursive calling
-   * @param {Boolean} force         | enabled or disable forcing
-   * @param {Boolean} [openAll]     | This will recursively force all nodes in the parent to be released
-   * @private
-   */
-  exports._expandClusterNode = function(parentNode, recursive, force, openAll) {
-    // first check if node is a cluster
-    if (parentNode.clusterSize > 1) {
-      // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
-      if (parentNode.clusterSize < this.constants.clustering.sectorThreshold) {
-        openAll = true;
+          this._data = {};
+
+          this._locale = moment.localeData();
+
+          this._bubble();
       }
-      recursive = openAll ? true : recursive;
 
-      // if the last child has been added on a smaller scale than current scale decluster
-      if (parentNode.formationScale < this.scale || force == true) {
-        // we will check if any of the contained child nodes should be removed from the cluster
-        for (var containedNodeId in parentNode.containedNodes) {
-          if (parentNode.containedNodes.hasOwnProperty(containedNodeId)) {
-            var childNode = parentNode.containedNodes[containedNodeId];
+      /************************************
+          Helpers
+      ************************************/
 
-            // force expand will expand the largest cluster size clusters. Since we cluster from outside in, we assume that
-            // the largest cluster is the one that comes from outside
-            if (force == true) {
-              if (childNode.clusterSession == parentNode.clusterSessions[parentNode.clusterSessions.length-1]
-                  || openAll) {
-                this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
-              }
-            }
-            else {
-              if (this._nodeInActiveArea(parentNode)) {
-                this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
+
+      function extend(a, b) {
+          for (var i in b) {
+              if (hasOwnProp(b, i)) {
+                  a[i] = b[i];
               }
-            }
           }
-        }
-      }
-    }
-  };
 
-  /**
-   * ONLY CALLED FROM _expandClusterNode
-   *
-   * This function will expel a child_node from a parent_node. This is to de-cluster the node. This function will remove
-   * the child node from the parent contained_node object and put it back into the global nodes object.
-   * The same holds for the edge that was connected to the child node. It is moved back into the global edges object.
-   *
-   * @param {Node}    parentNode        | the parent node
-   * @param {String}  containedNodeId   | child_node id as it is contained in the containedNodes object of the parent node
-   * @param {Boolean} recursive         | This will also check if the child needs to be expanded.
-   *                                      With force and recursive both true, the entire cluster is unpacked
-   * @param {Boolean} force             | This will disregard the zoom level and will expel this child from the parent
-   * @param {Boolean} openAll           | This will recursively force all nodes in the parent to be released
-   * @private
-   */
-  exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
-    var childNode = parentNode.containedNodes[containedNodeId]
+          if (hasOwnProp(b, 'toString')) {
+              a.toString = b.toString;
+          }
 
-    // if child node has been added on smaller scale than current, kick out
-    if (childNode.formationScale < this.scale || force == true) {
-      // unselect all selected items
-      this._unselectAll();
+          if (hasOwnProp(b, 'valueOf')) {
+              a.valueOf = b.valueOf;
+          }
 
-      // put the child node back in the global nodes object
-      this.nodes[containedNodeId] = childNode;
+          return a;
+      }
 
-      // release the contained edges from this childNode back into the global edges
-      this._releaseContainedEdges(parentNode,childNode);
+      function copyConfig(to, from) {
+          var i, prop, val;
 
-      // reconnect rerouted edges to the childNode
-      this._connectEdgeBackToChild(parentNode,childNode);
+          if (typeof from._isAMomentObject !== 'undefined') {
+              to._isAMomentObject = from._isAMomentObject;
+          }
+          if (typeof from._i !== 'undefined') {
+              to._i = from._i;
+          }
+          if (typeof from._f !== 'undefined') {
+              to._f = from._f;
+          }
+          if (typeof from._l !== 'undefined') {
+              to._l = from._l;
+          }
+          if (typeof from._strict !== 'undefined') {
+              to._strict = from._strict;
+          }
+          if (typeof from._tzm !== 'undefined') {
+              to._tzm = from._tzm;
+          }
+          if (typeof from._isUTC !== 'undefined') {
+              to._isUTC = from._isUTC;
+          }
+          if (typeof from._offset !== 'undefined') {
+              to._offset = from._offset;
+          }
+          if (typeof from._pf !== 'undefined') {
+              to._pf = from._pf;
+          }
+          if (typeof from._locale !== 'undefined') {
+              to._locale = from._locale;
+          }
 
-      // validate all edges in dynamicEdges
-      this._validateEdges(parentNode);
+          if (momentProperties.length > 0) {
+              for (i in momentProperties) {
+                  prop = momentProperties[i];
+                  val = from[prop];
+                  if (typeof val !== 'undefined') {
+                      to[prop] = val;
+                  }
+              }
+          }
 
-      // undo the changes from the clustering operation on the parent node
-      parentNode.options.mass -= childNode.options.mass;
-      parentNode.clusterSize -= childNode.clusterSize;
-      parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*(parentNode.clusterSize-1));
-      parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
+          return to;
+      }
 
-      // place the child node near the parent, not at the exact same location to avoid chaos in the system
-      childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
-      childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
+      function absRound(number) {
+          if (number < 0) {
+              return Math.ceil(number);
+          } else {
+              return Math.floor(number);
+          }
+      }
 
-      // remove node from the list
-      delete parentNode.containedNodes[containedNodeId];
+      // left zero fill a number
+      // see http://jsperf.com/left-zero-filling for performance comparison
+      function leftZeroFill(number, targetLength, forceSign) {
+          var output = '' + Math.abs(number),
+              sign = number >= 0;
 
-      // check if there are other childs with this clusterSession in the parent.
-      var othersPresent = false;
-      for (var childNodeId in parentNode.containedNodes) {
-        if (parentNode.containedNodes.hasOwnProperty(childNodeId)) {
-          if (parentNode.containedNodes[childNodeId].clusterSession == childNode.clusterSession) {
-            othersPresent = true;
-            break;
+          while (output.length < targetLength) {
+              output = '0' + output;
           }
-        }
-      }
-      // if there are no others, remove the cluster session from the list
-      if (othersPresent == false) {
-        parentNode.clusterSessions.pop();
+          return (sign ? (forceSign ? '+' : '') : '-') + output;
       }
 
-      this._repositionBezierNodes(childNode);
-  //      this._repositionBezierNodes(parentNode);
-
-      // remove the clusterSession from the child node
-      childNode.clusterSession = 0;
+      function positiveMomentsDifference(base, other) {
+          var res = {milliseconds: 0, months: 0};
 
-      // recalculate the size of the node on the next time the node is rendered
-      parentNode.clearSizeCache();
+          res.months = other.month() - base.month() +
+              (other.year() - base.year()) * 12;
+          if (base.clone().add(res.months, 'M').isAfter(other)) {
+              --res.months;
+          }
 
-      // restart the simulation to reorganise all nodes
-      this.moving = true;
-    }
+          res.milliseconds = +other - +(base.clone().add(res.months, 'M'));
 
-    // check if a further expansion step is possible if recursivity is enabled
-    if (recursive == true) {
-      this._expandClusterNode(childNode,recursive,force,openAll);
-    }
-  };
+          return res;
+      }
 
+      function momentsDifference(base, other) {
+          var res;
+          other = makeAs(other, base);
+          if (base.isBefore(other)) {
+              res = positiveMomentsDifference(base, other);
+          } else {
+              res = positiveMomentsDifference(other, base);
+              res.milliseconds = -res.milliseconds;
+              res.months = -res.months;
+          }
 
-  /**
-   * position the bezier nodes at the center of the edges
-   *
-   * @param node
-   * @private
-   */
-  exports._repositionBezierNodes = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      node.dynamicEdges[i].positionBezierNode();
-    }
-  };
+          return res;
+      }
 
+      // TODO: remove 'name' arg after deprecation is removed
+      function createAdder(direction, name) {
+          return function (val, period) {
+              var dur, tmp;
+              //invert the arguments, but complain about it
+              if (period !== null && !isNaN(+period)) {
+                  deprecateSimple(name, 'moment().' + name  + '(period, number) is deprecated. Please use moment().' + name + '(number, period).');
+                  tmp = val; val = period; period = tmp;
+              }
 
-  /**
-   * This function checks if any nodes at the end of their trees have edges below a threshold length
-   * This function is called only from updateClusters()
-   * forceLevelCollapse ignores the length of the edge and collapses one level
-   * This means that a node with only one edge will be clustered with its connected node
-   *
-   * @private
-   * @param {Boolean} force
-   */
-  exports._formClusters = function(force) {
-    if (force == false) {
-      this._formClustersByZoom();
-    }
-    else {
-      this._forceClustersByZoom();
-    }
-  };
+              val = typeof val === 'string' ? +val : val;
+              dur = moment.duration(val, period);
+              addOrSubtractDurationFromMoment(this, dur, direction);
+              return this;
+          };
+      }
 
+      function addOrSubtractDurationFromMoment(mom, duration, isAdding, updateOffset) {
+          var milliseconds = duration._milliseconds,
+              days = duration._days,
+              months = duration._months;
+          updateOffset = updateOffset == null ? true : updateOffset;
 
-  /**
-   * This function handles the clustering by zooming out, this is based on a minimum edge distance
-   *
-   * @private
-   */
-  exports._formClustersByZoom = function() {
-    var dx,dy,length,
-        minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-
-    // check if any edges are shorter than minLength and start the clustering
-    // the clustering favours the node with the larger mass
-    for (var edgeId in this.edges) {
-      if (this.edges.hasOwnProperty(edgeId)) {
-        var edge = this.edges[edgeId];
-        if (edge.connected) {
-          if (edge.toId != edge.fromId) {
-            dx = (edge.to.x - edge.from.x);
-            dy = (edge.to.y - edge.from.y);
-            length = Math.sqrt(dx * dx + dy * dy);
+          if (milliseconds) {
+              mom._d.setTime(+mom._d + milliseconds * isAdding);
+          }
+          if (days) {
+              rawSetter(mom, 'Date', rawGetter(mom, 'Date') + days * isAdding);
+          }
+          if (months) {
+              rawMonthSetter(mom, rawGetter(mom, 'Month') + months * isAdding);
+          }
+          if (updateOffset) {
+              moment.updateOffset(mom, days || months);
+          }
+      }
 
+      // check if is an array
+      function isArray(input) {
+          return Object.prototype.toString.call(input) === '[object Array]';
+      }
 
-            if (length < minLength) {
-              // first check which node is larger
-              var parentNode = edge.from;
-              var childNode = edge.to;
-              if (edge.to.options.mass > edge.from.options.mass) {
-                parentNode = edge.to;
-                childNode = edge.from;
-              }
+      function isDate(input) {
+          return Object.prototype.toString.call(input) === '[object Date]' ||
+              input instanceof Date;
+      }
 
-              if (childNode.dynamicEdgesLength == 1) {
-                this._addToCluster(parentNode,childNode,false);
-              }
-              else if (parentNode.dynamicEdgesLength == 1) {
-                this._addToCluster(childNode,parentNode,false);
+      // compare two arrays, return the number of differences
+      function compareArrays(array1, array2, dontConvert) {
+          var len = Math.min(array1.length, array2.length),
+              lengthDiff = Math.abs(array1.length - array2.length),
+              diffs = 0,
+              i;
+          for (i = 0; i < len; i++) {
+              if ((dontConvert && array1[i] !== array2[i]) ||
+                  (!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
+                  diffs++;
               }
-            }
           }
-        }
+          return diffs + lengthDiff;
       }
-    }
-  };
 
-  /**
-   * This function forces the network to cluster all nodes with only one connecting edge to their
-   * connected node.
-   *
-   * @private
-   */
-  exports._forceClustersByZoom = function() {
-    for (var nodeId in this.nodes) {
-      // another node could have absorbed this child.
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var childNode = this.nodes[nodeId];
+      function normalizeUnits(units) {
+          if (units) {
+              var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
+              units = unitAliases[units] || camelFunctions[lowered] || lowered;
+          }
+          return units;
+      }
 
-        // the edges can be swallowed by another decrease
+      function normalizeObjectUnits(inputObject) {
+          var normalizedInput = {},
+              normalizedProp,
+              prop;
 
-        if (childNode.dynamicEdgesLength == 1 && childNode.dynamicEdges.length != 0) {
-          var edge = childNode.dynamicEdges[0];
-          var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
-          // group to the largest node
-          if (childNode.id != parentNode.id) {
-            if (parentNode.options.mass > childNode.options.mass) {
-              this._addToCluster(parentNode,childNode,true);
-            }
-            else {
-              this._addToCluster(childNode,parentNode,true);
-            }
+          for (prop in inputObject) {
+              if (hasOwnProp(inputObject, prop)) {
+                  normalizedProp = normalizeUnits(prop);
+                  if (normalizedProp) {
+                      normalizedInput[normalizedProp] = inputObject[prop];
+                  }
+              }
           }
-        }
+
+          return normalizedInput;
       }
-    }
-  };
 
+      function makeList(field) {
+          var count, setter;
 
-  /**
-   * To keep the nodes of roughly equal size we normalize the cluster levels.
-   * This function clusters a node to its smallest connected neighbour.
-   *
-   * @param node
-   * @private
-   */
-  exports._clusterToSmallestNeighbour = function(node) {
-    var smallestNeighbour = -1;
-    var smallestNeighbourNode = null;
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      if (node.dynamicEdges[i] !== undefined) {
-        var neighbour = null;
-        if (node.dynamicEdges[i].fromId != node.id) {
-          neighbour = node.dynamicEdges[i].from;
-        }
-        else if (node.dynamicEdges[i].toId != node.id) {
-          neighbour = node.dynamicEdges[i].to;
-        }
+          if (field.indexOf('week') === 0) {
+              count = 7;
+              setter = 'day';
+          }
+          else if (field.indexOf('month') === 0) {
+              count = 12;
+              setter = 'month';
+          }
+          else {
+              return;
+          }
+
+          moment[field] = function (format, index) {
+              var i, getter,
+                  method = moment._locale[field],
+                  results = [];
 
+              if (typeof format === 'number') {
+                  index = format;
+                  format = undefined;
+              }
 
-        if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
-          smallestNeighbour = neighbour.clusterSessions.length;
-          smallestNeighbourNode = neighbour;
-        }
+              getter = function (i) {
+                  var m = moment().utc().set(setter, i);
+                  return method.call(moment._locale, m, format || '');
+              };
+
+              if (index != null) {
+                  return getter(index);
+              }
+              else {
+                  for (i = 0; i < count; i++) {
+                      results.push(getter(i));
+                  }
+                  return results;
+              }
+          };
       }
-    }
 
-    if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
-      this._addToCluster(neighbour, node, true);
-    }
-  };
+      function toInt(argumentForCoercion) {
+          var coercedNumber = +argumentForCoercion,
+              value = 0;
 
+          if (coercedNumber !== 0 && isFinite(coercedNumber)) {
+              if (coercedNumber >= 0) {
+                  value = Math.floor(coercedNumber);
+              } else {
+                  value = Math.ceil(coercedNumber);
+              }
+          }
 
-  /**
-   * This function forms clusters from hubs, it loops over all nodes
-   *
-   * @param {Boolean} force         |   Disregard zoom level
-   * @param {Boolean} onlyEqual     |   This only clusters a hub with a specific number of edges
-   * @private
-   */
-  exports._formClustersByHub = function(force, onlyEqual) {
-    // we loop over all nodes in the list
-    for (var nodeId in this.nodes) {
-      // we check if it is still available since it can be used by the clustering in this loop
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        this._formClusterFromHub(this.nodes[nodeId],force,onlyEqual);
+          return value;
       }
-    }
-  };
 
-  /**
-   * This function forms a cluster from a specific preselected hub node
-   *
-   * @param {Node}    hubNode       |   the node we will cluster as a hub
-   * @param {Boolean} force         |   Disregard zoom level
-   * @param {Boolean} onlyEqual     |   This only clusters a hub with a specific number of edges
-   * @param {Number} [absorptionSizeOffset] |
-   * @private
-   */
-  exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
-    if (absorptionSizeOffset === undefined) {
-      absorptionSizeOffset = 0;
-    }
+      function daysInMonth(year, month) {
+          return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+      }
 
-    if (hubNode.dynamicEdgesLength < 0) {
-      console.error(hubNode.dynamicEdgesLength, this.hubThreshold, onlyEqual)
-    }
-    // we decide if the node is a hub
-    if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-      (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+      function weeksInYear(year, dow, doy) {
+          return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
+      }
 
-      // initialize variables
-      var dx,dy,length;
-      var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-      var allowCluster = false;
+      function daysInYear(year) {
+          return isLeapYear(year) ? 366 : 365;
+      }
 
-      // we create a list of edges because the dynamicEdges change over the course of this loop
-      var edgesIdarray = [];
-      var amountOfInitialEdges = hubNode.dynamicEdges.length;
-      for (var j = 0; j < amountOfInitialEdges; j++) {
-        edgesIdarray.push(hubNode.dynamicEdges[j].id);
+      function isLeapYear(year) {
+          return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
       }
 
-      // if the hub clustering is not forced, we check if one of the edges connected
-      // to a cluster is small enough based on the constants.clustering.clusterEdgeThreshold
-      if (force == false) {
-        allowCluster = false;
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          var edge = this.edges[edgesIdarray[j]];
-          if (edge !== undefined) {
-            if (edge.connected) {
-              if (edge.toId != edge.fromId) {
-                dx = (edge.to.x - edge.from.x);
-                dy = (edge.to.y - edge.from.y);
-                length = Math.sqrt(dx * dx + dy * dy);
+      function checkOverflow(m) {
+          var overflow;
+          if (m._a && m._pf.overflow === -2) {
+              overflow =
+                  m._a[MONTH] < 0 || m._a[MONTH] > 11 ? MONTH :
+                  m._a[DATE] < 1 || m._a[DATE] > daysInMonth(m._a[YEAR], m._a[MONTH]) ? DATE :
+                  m._a[HOUR] < 0 || m._a[HOUR] > 24 ||
+                      (m._a[HOUR] === 24 && (m._a[MINUTE] !== 0 ||
+                                             m._a[SECOND] !== 0 ||
+                                             m._a[MILLISECOND] !== 0)) ? HOUR :
+                  m._a[MINUTE] < 0 || m._a[MINUTE] > 59 ? MINUTE :
+                  m._a[SECOND] < 0 || m._a[SECOND] > 59 ? SECOND :
+                  m._a[MILLISECOND] < 0 || m._a[MILLISECOND] > 999 ? MILLISECOND :
+                  -1;
 
-                if (length < minLength) {
-                  allowCluster = true;
-                  break;
-                }
+              if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
+                  overflow = DATE;
               }
-            }
+
+              m._pf.overflow = overflow;
           }
-        }
       }
 
-      // start the clustering if allowed
-      if ((!force && allowCluster) || force) {
-        var children = [];
-        var childrenIds = {};
-        // we loop over all edges INITIALLY connected to this hub to get a list of the childNodes
-        for (j = 0; j < amountOfInitialEdges; j++) {
-          edge = this.edges[edgesIdarray[j]];
-          var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
-          if (childrenIds[childNode.id] === undefined) {
-            childrenIds[childNode.id] = true;
-            children.push(childNode);
-          }
-        }
+      function isValid(m) {
+          if (m._isValid == null) {
+              m._isValid = !isNaN(m._d.getTime()) &&
+                  m._pf.overflow < 0 &&
+                  !m._pf.empty &&
+                  !m._pf.invalidMonth &&
+                  !m._pf.nullInput &&
+                  !m._pf.invalidFormat &&
+                  !m._pf.userInvalidated;
 
-        for (j = 0; j < children.length; j++) {
-          var childNode = children[j];
-          // we do not want hubs to merge with other hubs nor do we want to cluster itself.
-          if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
-            (childNode.id != hubNode.id)) {
-            this._addToCluster(hubNode,childNode,force);
+              if (m._strict) {
+                  m._isValid = m._isValid &&
+                      m._pf.charsLeftOver === 0 &&
+                      m._pf.unusedTokens.length === 0 &&
+                      m._pf.bigHour === undefined;
+              }
           }
-        }
+          return m._isValid;
       }
-    }
-  };
 
+      function normalizeLocale(key) {
+          return key ? key.toLowerCase().replace('_', '-') : key;
+      }
 
+      // pick the locale from the array
+      // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each
+      // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root
+      function chooseLocale(names) {
+          var i = 0, j, next, locale, split;
 
-  /**
-   * This function adds the child node to the parent node, creating a cluster if it is not already.
-   *
-   * @param {Node} parentNode           | this is the node that will house the child node
-   * @param {Node} childNode            | this node will be deleted from the global this.nodes and stored in the parent node
-   * @param {Boolean} force             | true will only update the remainingEdges at the very end of the clustering, ensuring single level collapse
-   * @private
-   */
-  exports._addToCluster = function(parentNode, childNode, force) {
-    // join child node in the parent node
-    parentNode.containedNodes[childNode.id] = childNode;
-    //console.log(parentNode.id, childNode.id)
-    // manage all the edges connected to the child and parent nodes
-    for (var i = 0; i < childNode.dynamicEdges.length; i++) {
-      var edge = childNode.dynamicEdges[i];
-      if (edge.toId == parentNode.id || edge.fromId == parentNode.id) { // edge connected to parentNode
-        //console.log("COLLECT",parentNode.id, childNode.id, edge.toId, edge.fromId)
-        this._addToContainedEdges(parentNode,childNode,edge);
+          while (i < names.length) {
+              split = normalizeLocale(names[i]).split('-');
+              j = split.length;
+              next = normalizeLocale(names[i + 1]);
+              next = next ? next.split('-') : null;
+              while (j > 0) {
+                  locale = loadLocale(split.slice(0, j).join('-'));
+                  if (locale) {
+                      return locale;
+                  }
+                  if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) {
+                      //the next array item is better than a shallower substring of this one
+                      break;
+                  }
+                  j--;
+              }
+              i++;
+          }
+          return null;
       }
-      else {
-        //console.log("REWIRE",parentNode.id, childNode.id, edge.toId, edge.fromId)
-        this._connectEdgeToCluster(parentNode,childNode,edge);
+
+      function loadLocale(name) {
+          var oldLocale = null;
+          if (!locales[name] && hasModule) {
+              try {
+                  oldLocale = moment.locale();
+                  !(function webpackMissingModule() { var e = new Error("Cannot find module \"./locale\""); e.code = 'MODULE_NOT_FOUND'; throw e; }());
+                  // because defineLocale currently also sets the global locale, we want to undo that for lazy loaded locales
+                  moment.locale(oldLocale);
+              } catch (e) { }
+          }
+          return locales[name];
       }
-    }
-    // a contained node has no dynamic edges.
-    childNode.dynamicEdges = [];
 
-    // remove circular edges from clusters
-    this._containCircularEdgesFromNode(parentNode,childNode);
+      // Return a moment from input, that is local/utc/utcOffset equivalent to
+      // model.
+      function makeAs(input, model) {
+          var res, diff;
+          if (model._isUTC) {
+              res = model.clone();
+              diff = (moment.isMoment(input) || isDate(input) ?
+                      +input : +moment(input)) - (+res);
+              // Use low-level api, because this fn is low-level api.
+              res._d.setTime(+res._d + diff);
+              moment.updateOffset(res, false);
+              return res;
+          } else {
+              return moment(input).local();
+          }
+      }
 
+      /************************************
+          Locale
+      ************************************/
 
-    // remove the childNode from the global nodes object
-    delete this.nodes[childNode.id];
 
-    // update the properties of the child and parent
-    var massBefore = parentNode.options.mass;
-    childNode.clusterSession = this.clusterSession;
-    parentNode.options.mass += childNode.options.mass;
-    parentNode.clusterSize += childNode.clusterSize;
-    parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+      extend(Locale.prototype, {
 
-    // keep track of the clustersessions so we can open the cluster up as it has been formed.
-    if (parentNode.clusterSessions[parentNode.clusterSessions.length - 1] != this.clusterSession) {
-      parentNode.clusterSessions.push(this.clusterSession);
-    }
+          set : function (config) {
+              var prop, i;
+              for (i in config) {
+                  prop = config[i];
+                  if (typeof prop === 'function') {
+                      this[i] = prop;
+                  } else {
+                      this['_' + i] = prop;
+                  }
+              }
+              // Lenient ordinal parsing accepts just a number in addition to
+              // number + (possibly) stuff coming from _ordinalParseLenient.
+              this._ordinalParseLenient = new RegExp(this._ordinalParse.source + '|' + /\d{1,2}/.source);
+          },
 
-    // forced clusters only open from screen size and double tap
-    if (force == true) {
-      parentNode.formationScale = 0;
-    }
-    else {
-      parentNode.formationScale = this.scale; // The latest child has been added on this scale
-    }
+          _months : 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
+          months : function (m) {
+              return this._months[m.month()];
+          },
 
-    // recalculate the size of the node on the next time the node is rendered
-    parentNode.clearSizeCache();
+          _monthsShort : 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
+          monthsShort : function (m) {
+              return this._monthsShort[m.month()];
+          },
 
-    // set the pop-out scale for the childnode
-    parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+          monthsParse : function (monthName, format, strict) {
+              var i, mom, regex;
 
-    // nullify the movement velocity of the child, this is to avoid hectic behaviour
-    childNode.clearVelocity();
+              if (!this._monthsParse) {
+                  this._monthsParse = [];
+                  this._longMonthsParse = [];
+                  this._shortMonthsParse = [];
+              }
 
-    // the mass has altered, preservation of energy dictates the velocity to be updated
-    parentNode.updateVelocity(massBefore);
+              for (i = 0; i < 12; i++) {
+                  // make the regex if we don't have it already
+                  mom = moment.utc([2000, i]);
+                  if (strict && !this._longMonthsParse[i]) {
+                      this._longMonthsParse[i] = new RegExp('^' + this.months(mom, '').replace('.', '') + '$', 'i');
+                      this._shortMonthsParse[i] = new RegExp('^' + this.monthsShort(mom, '').replace('.', '') + '$', 'i');
+                  }
+                  if (!strict && !this._monthsParse[i]) {
+                      regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
+                      this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
+                  }
+                  // test the regex
+                  if (strict && format === 'MMMM' && this._longMonthsParse[i].test(monthName)) {
+                      return i;
+                  } else if (strict && format === 'MMM' && this._shortMonthsParse[i].test(monthName)) {
+                      return i;
+                  } else if (!strict && this._monthsParse[i].test(monthName)) {
+                      return i;
+                  }
+              }
+          },
 
-    // restart the simulation to reorganise all nodes
-    this.moving = true;
-  };
+          _weekdays : 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
+          weekdays : function (m) {
+              return this._weekdays[m.day()];
+          },
 
+          _weekdaysShort : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+          weekdaysShort : function (m) {
+              return this._weekdaysShort[m.day()];
+          },
 
-  /**
-   * This function will apply the changes made to the remainingEdges during the formation of the clusters.
-   * This is a seperate function to allow for level-wise collapsing of the node barnesHutTree.
-   * It has to be called if a level is collapsed. It is called by _formClusters().
-   * @private
-   */
-  exports._updateDynamicEdges = function() {
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      var node = this.nodes[this.nodeIndices[i]];
-      node.dynamicEdgesLength = node.dynamicEdges.length;
-
-      // this corrects for multiple edges pointing at the same other node
-      var correction = 0;
-      if (node.dynamicEdgesLength > 1) {
-        for (var j = 0; j < node.dynamicEdgesLength - 1; j++) {
-          var edgeToId = node.dynamicEdges[j].toId;
-          var edgeFromId = node.dynamicEdges[j].fromId;
-          for (var k = j+1; k < node.dynamicEdgesLength; k++) {
-            if ((node.dynamicEdges[k].toId == edgeToId && node.dynamicEdges[k].fromId == edgeFromId) ||
-                (node.dynamicEdges[k].fromId == edgeToId && node.dynamicEdges[k].toId == edgeFromId)) {
-              correction += 1;
-            }
-          }
-        }
-      }
-      if (node.dynamicEdgesLength < correction) {
-        console.error("overshoot", node.dynamicEdgesLength, correction)
-      }
+          _weekdaysMin : 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),
+          weekdaysMin : function (m) {
+              return this._weekdaysMin[m.day()];
+          },
 
-      node.dynamicEdgesLength -= correction;
-    }
-  };
+          weekdaysParse : function (weekdayName) {
+              var i, mom, regex;
 
+              if (!this._weekdaysParse) {
+                  this._weekdaysParse = [];
+              }
 
-  /**
-   * This adds an edge from the childNode to the contained edges of the parent node
-   *
-   * @param parentNode    | Node object
-   * @param childNode     | Node object
-   * @param edge          | Edge object
-   * @private
-   */
-  exports._addToContainedEdges = function(parentNode, childNode, edge) {
-    // create an array object if it does not yet exist for this childNode
-    if (!(parentNode.containedEdges.hasOwnProperty(childNode.id))) {
-      parentNode.containedEdges[childNode.id] = []
-    }
-    // add this edge to the list
-    parentNode.containedEdges[childNode.id].push(edge);
-
-    // remove the edge from the global edges object
-    delete this.edges[edge.id];
-
-    // remove the edge from the parent object
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      if (parentNode.dynamicEdges[i].id == edge.id) {
-        parentNode.dynamicEdges.splice(i,1);
-        break;
-      }
-    }
-  };
-
-  /**
-   * This function connects an edge that was connected to a child node to the parent node.
-   * It keeps track of which nodes it has been connected to with the originalId array.
-   *
-   * @param {Node} parentNode    | Node object
-   * @param {Node} childNode     | Node object
-   * @param {Edge} edge          | Edge object
-   * @private
-   */
-  exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
-    // handle circular edges
-    if (edge.toId == edge.fromId) {
-      this._addToContainedEdges(parentNode, childNode, edge);
-    }
-    else {
-      if (edge.toId == childNode.id) {    // edge connected to other node on the "to" side
-        edge.originalToId.push(childNode.id);
-        edge.to = parentNode;
-        edge.toId = parentNode.id;
-      }
-      else {          // edge connected to other node with the "from" side
-
-        edge.originalFromId.push(childNode.id);
-        edge.from = parentNode;
-        edge.fromId = parentNode.id;
-      }
-
-      this._addToReroutedEdges(parentNode,childNode,edge);
-    }
-  };
-
-
-  /**
-   * If a node is connected to itself, a circular edge is drawn. When clustering we want to contain
-   * these edges inside of the cluster.
-   *
-   * @param parentNode
-   * @param childNode
-   * @private
-   */
-  exports._containCircularEdgesFromNode = function(parentNode, childNode) {
-    // manage all the edges connected to the child and parent nodes
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      // handle circular edges
-      if (edge.toId == edge.fromId) {
-        this._addToContainedEdges(parentNode, childNode, edge);
-      }
-    }
-  };
-
-
-  /**
-   * This adds an edge from the childNode to the rerouted edges of the parent node
-   *
-   * @param parentNode    | Node object
-   * @param childNode     | Node object
-   * @param edge          | Edge object
-   * @private
-   */
-  exports._addToReroutedEdges = function(parentNode, childNode, edge) {
-    // create an array object if it does not yet exist for this childNode
-    // we store the edge in the rerouted edges so we can restore it when the cluster pops open
-    if (!(parentNode.reroutedEdges.hasOwnProperty(childNode.id))) {
-      parentNode.reroutedEdges[childNode.id] = [];
-    }
-    parentNode.reroutedEdges[childNode.id].push(edge);
-
-    // this edge becomes part of the dynamicEdges of the cluster node
-    parentNode.dynamicEdges.push(edge);
-   };
-
-
-
-  /**
-   * This function connects an edge that was connected to a cluster node back to the child node.
-   *
-   * @param parentNode    | Node object
-   * @param childNode     | Node object
-   * @private
-   */
-  exports._connectEdgeBackToChild = function(parentNode, childNode) {
-    if (parentNode.reroutedEdges.hasOwnProperty(childNode.id)) {
-      for (var i = 0; i < parentNode.reroutedEdges[childNode.id].length; i++) {
-        var edge = parentNode.reroutedEdges[childNode.id][i];
-        if (edge.originalFromId[edge.originalFromId.length-1] == childNode.id) {
-          edge.originalFromId.pop();
-          edge.fromId = childNode.id;
-          edge.from = childNode;
-        }
-        else {
-          edge.originalToId.pop();
-          edge.toId = childNode.id;
-          edge.to = childNode;
-        }
+              for (i = 0; i < 7; i++) {
+                  // make the regex if we don't have it already
+                  if (!this._weekdaysParse[i]) {
+                      mom = moment([2000, 1]).day(i);
+                      regex = '^' + this.weekdays(mom, '') + '|^' + this.weekdaysShort(mom, '') + '|^' + this.weekdaysMin(mom, '');
+                      this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i');
+                  }
+                  // test the regex
+                  if (this._weekdaysParse[i].test(weekdayName)) {
+                      return i;
+                  }
+              }
+          },
 
-        // append this edge to the list of edges connecting to the childnode
-        childNode.dynamicEdges.push(edge);
+          _longDateFormat : {
+              LTS : 'h:mm:ss A',
+              LT : 'h:mm A',
+              L : 'MM/DD/YYYY',
+              LL : 'MMMM D, YYYY',
+              LLL : 'MMMM D, YYYY LT',
+              LLLL : 'dddd, MMMM D, YYYY LT'
+          },
+          longDateFormat : function (key) {
+              var output = this._longDateFormat[key];
+              if (!output && this._longDateFormat[key.toUpperCase()]) {
+                  output = this._longDateFormat[key.toUpperCase()].replace(/MMMM|MM|DD|dddd/g, function (val) {
+                      return val.slice(1);
+                  });
+                  this._longDateFormat[key] = output;
+              }
+              return output;
+          },
 
-        // remove the edge from the parent object
-        for (var j = 0; j < parentNode.dynamicEdges.length; j++) {
-          if (parentNode.dynamicEdges[j].id == edge.id) {
-            parentNode.dynamicEdges.splice(j,1);
-            break;
-          }
-        }
-      }
-      // remove the entry from the rerouted edges
-      delete parentNode.reroutedEdges[childNode.id];
-    }
-  };
+          isPM : function (input) {
+              // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays
+              // Using charAt should be more compatible.
+              return ((input + '').toLowerCase().charAt(0) === 'p');
+          },
 
+          _meridiemParse : /[ap]\.?m?\.?/i,
+          meridiem : function (hours, minutes, isLower) {
+              if (hours > 11) {
+                  return isLower ? 'pm' : 'PM';
+              } else {
+                  return isLower ? 'am' : 'AM';
+              }
+          },
 
-  /**
-   * When loops are clustered, an edge can be both in the rerouted array and the contained array.
-   * This function is called last to verify that all edges in dynamicEdges are in fact connected to the
-   * parentNode
-   *
-   * @param parentNode    | Node object
-   * @private
-   */
-  exports._validateEdges = function(parentNode) {
-    var dynamicEdges = []
-    for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
-      var edge = parentNode.dynamicEdges[i];
-      if (parentNode.id == edge.toId || parentNode.id == edge.fromId) {
-        dynamicEdges.push(edge);
-      }
-    }
-    parentNode.dynamicEdges = dynamicEdges;
-  };
 
+          _calendar : {
+              sameDay : '[Today at] LT',
+              nextDay : '[Tomorrow at] LT',
+              nextWeek : 'dddd [at] LT',
+              lastDay : '[Yesterday at] LT',
+              lastWeek : '[Last] dddd [at] LT',
+              sameElse : 'L'
+          },
+          calendar : function (key, mom, now) {
+              var output = this._calendar[key];
+              return typeof output === 'function' ? output.apply(mom, [now]) : output;
+          },
 
-  /**
-   * This function released the contained edges back into the global domain and puts them back into the
-   * dynamic edges of both parent and child.
-   *
-   * @param {Node} parentNode    |
-   * @param {Node} childNode     |
-   * @private
-   */
-  exports._releaseContainedEdges = function(parentNode, childNode) {
-    for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
-      var edge = parentNode.containedEdges[childNode.id][i];
+          _relativeTime : {
+              future : 'in %s',
+              past : '%s ago',
+              s : 'a few seconds',
+              m : 'a minute',
+              mm : '%d minutes',
+              h : 'an hour',
+              hh : '%d hours',
+              d : 'a day',
+              dd : '%d days',
+              M : 'a month',
+              MM : '%d months',
+              y : 'a year',
+              yy : '%d years'
+          },
 
-      // put the edge back in the global edges object
-      this.edges[edge.id] = edge;
+          relativeTime : function (number, withoutSuffix, string, isFuture) {
+              var output = this._relativeTime[string];
+              return (typeof output === 'function') ?
+                  output(number, withoutSuffix, string, isFuture) :
+                  output.replace(/%d/i, number);
+          },
 
-      // put the edge back in the dynamic edges of the child and parent
-      childNode.dynamicEdges.push(edge);
-      parentNode.dynamicEdges.push(edge);
-    }
-    // remove the entry from the contained edges
-    delete parentNode.containedEdges[childNode.id];
+          pastFuture : function (diff, output) {
+              var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
+              return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+          },
 
-  };
+          ordinal : function (number) {
+              return this._ordinal.replace('%d', number);
+          },
+          _ordinal : '%d',
+          _ordinalParse : /\d{1,2}/,
 
+          preparse : function (string) {
+              return string;
+          },
 
+          postformat : function (string) {
+              return string;
+          },
 
+          week : function (mom) {
+              return weekOfYear(mom, this._week.dow, this._week.doy).week;
+          },
 
-  // ------------------- UTILITY FUNCTIONS ---------------------------- //
+          _week : {
+              dow : 0, // Sunday is the first day of the week.
+              doy : 6  // The week that contains Jan 1st is the first week of the year.
+          },
 
+          firstDayOfWeek : function () {
+              return this._week.dow;
+          },
 
-  /**
-   * This updates the node labels for all nodes (for debugging purposes)
-   */
-  exports.updateLabels = function() {
-    var nodeId;
-    // update node labels
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var node = this.nodes[nodeId];
-        if (node.clusterSize > 1) {
-          node.label = "[".concat(String(node.clusterSize),"]");
-        }
-      }
-    }
+          firstDayOfYear : function () {
+              return this._week.doy;
+          },
 
-    // update node labels
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.clusterSize == 1) {
-          if (node.originalLabel !== undefined) {
-            node.label = node.originalLabel;
-          }
-          else {
-            node.label = String(node.id);
+          _invalidDate: 'Invalid date',
+          invalidDate: function () {
+              return this._invalidDate;
           }
-        }
-      }
-    }
-
-  //    /* Debug Override */
-  //    for (nodeId in this.nodes) {
-  //      if (this.nodes.hasOwnProperty(nodeId)) {
-  //        node = this.nodes[nodeId];
-  //        node.label = String(node.level);
-  //      }
-  //    }
-
-  };
-
+      });
 
-  /**
-   * We want to keep the cluster level distribution rather small. This means we do not want unclustered nodes
-   * if the rest of the nodes are already a few cluster levels in.
-   * To fix this we use this function. It determines the min and max cluster level and sends nodes that have not
-   * clustered enough to the clusterToSmallestNeighbours function.
-   */
-  exports.normalizeClusterLevels = function() {
-    var maxLevel = 0;
-    var minLevel = 1e9;
-    var clusterLevel = 0;
-    var nodeId;
+      /************************************
+          Formatting
+      ************************************/
 
-    // we loop over all nodes in the list
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        clusterLevel = this.nodes[nodeId].clusterSessions.length;
-        if (maxLevel < clusterLevel) {maxLevel = clusterLevel;}
-        if (minLevel > clusterLevel) {minLevel = clusterLevel;}
-      }
-    }
 
-    if (maxLevel - minLevel > this.constants.clustering.clusterLevelDifference) {
-      var amountOfNodes = this.nodeIndices.length;
-      var targetLevel = maxLevel - this.constants.clustering.clusterLevelDifference;
-      // we loop over all nodes in the list
-      for (nodeId in this.nodes) {
-        if (this.nodes.hasOwnProperty(nodeId)) {
-          if (this.nodes[nodeId].clusterSessions.length < targetLevel) {
-            this._clusterToSmallestNeighbour(this.nodes[nodeId]);
+      function removeFormattingTokens(input) {
+          if (input.match(/\[[\s\S]/)) {
+              return input.replace(/^\[|\]$/g, '');
           }
-        }
-      }
-      this._updateNodeIndexList();
-      this._updateDynamicEdges();
-      // if a cluster was formed, we increase the clusterSession
-      if (this.nodeIndices.length != amountOfNodes) {
-        this.clusterSession += 1;
+          return input.replace(/\\/g, '');
       }
-    }
-  };
-
-
 
-  /**
-   * This function determines if the cluster we want to decluster is in the active area
-   * this means around the zoom center
-   *
-   * @param {Node} node
-   * @returns {boolean}
-   * @private
-   */
-  exports._nodeInActiveArea = function(node) {
-    return (
-      Math.abs(node.x - this.areaCenter.x) <= this.constants.clustering.activeAreaBoxSize/this.scale
-        &&
-      Math.abs(node.y - this.areaCenter.y) <= this.constants.clustering.activeAreaBoxSize/this.scale
-      )
-  };
+      function makeFormatFunction(format) {
+          var array = format.match(formattingTokens), i, length;
 
+          for (i = 0, length = array.length; i < length; i++) {
+              if (formatTokenFunctions[array[i]]) {
+                  array[i] = formatTokenFunctions[array[i]];
+              } else {
+                  array[i] = removeFormattingTokens(array[i]);
+              }
+          }
 
-  /**
-   * This is an adaptation of the original repositioning function. This is called if the system is clustered initially
-   * It puts large clusters away from the center and randomizes the order.
-   *
-   */
-  exports.repositionNodes = function() {
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      var node = this.nodes[this.nodeIndices[i]];
-      if ((node.xFixed == false || node.yFixed == false)) {
-        var radius = 10 * 0.1*this.nodeIndices.length * Math.min(100,node.options.mass);
-        var angle = 2 * Math.PI * Math.random();
-        if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
-        if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
-        this._repositionBezierNodes(node);
+          return function (mom) {
+              var output = '';
+              for (i = 0; i < length; i++) {
+                  output += array[i] instanceof Function ? array[i].call(mom, format) : array[i];
+              }
+              return output;
+          };
       }
-    }
-  };
 
+      // format date using native date object
+      function formatMoment(m, format) {
+          if (!m.isValid()) {
+              return m.localeData().invalidDate();
+          }
 
-  /**
-   * We determine how many connections denote an important hub.
-   * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
-   *
-   * @private
-   */
-  exports._getHubSize = function() {
-    var average = 0;
-    var averageSquared = 0;
-    var hubCounter = 0;
-    var largestHub = 0;
+          format = expandFormat(format, m.localeData());
 
-    for (var i = 0; i < this.nodeIndices.length; i++) {
+          if (!formatFunctions[format]) {
+              formatFunctions[format] = makeFormatFunction(format);
+          }
 
-      var node = this.nodes[this.nodeIndices[i]];
-      if (node.dynamicEdgesLength > largestHub) {
-        largestHub = node.dynamicEdgesLength;
+          return formatFunctions[format](m);
       }
-      average += node.dynamicEdgesLength;
-      averageSquared += Math.pow(node.dynamicEdgesLength,2);
-      hubCounter += 1;
-    }
-    average = average / hubCounter;
-    averageSquared = averageSquared / hubCounter;
-
-    var variance = averageSquared - Math.pow(average,2);
 
-    var standardDeviation = Math.sqrt(variance);
-
-    this.hubThreshold = Math.floor(average + 2*standardDeviation);
-
-    // always have at least one to cluster
-    if (this.hubThreshold > largestHub) {
-      this.hubThreshold = largestHub;
-    }
-
-  //  console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
-  //  console.log("hubThreshold:",this.hubThreshold);
-  };
+      function expandFormat(format, locale) {
+          var i = 5;
 
+          function replaceLongDateFormatTokens(input) {
+              return locale.longDateFormat(input) || input;
+          }
 
-  /**
-   * We reduce the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
-   * with this amount we can cluster specifically on these chains.
-   *
-   * @param   {Number} fraction     | between 0 and 1, the percentage of chains to reduce
-   * @private
-   */
-  exports._reduceAmountOfChains = function(fraction) {
-    this.hubThreshold = 2;
-    var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
-          if (reduceAmount > 0) {
-            this._formClusterFromHub(this.nodes[nodeId],true,true,1);
-            reduceAmount -= 1;
+          localFormattingTokens.lastIndex = 0;
+          while (i >= 0 && localFormattingTokens.test(format)) {
+              format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
+              localFormattingTokens.lastIndex = 0;
+              i -= 1;
           }
-        }
-      }
-    }
-  };
 
-  /**
-   * We get the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
-   * with this amount we can cluster specifically on these chains.
-   *
-   * @private
-   */
-  exports._getChainFraction = function() {
-    var chains = 0;
-    var total = 0;
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
-          chains += 1;
-        }
-        total += 1;
+          return format;
       }
-    }
-    return chains/total;
-  };
-
 
-/***/ },
-/* 62 */
-/***/ function(module, exports, __webpack_require__) {
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(40);
+      /************************************
+          Parsing
+      ************************************/
 
-  /**
-   * Creation of the SectorMixin var.
-   *
-   * This contains all the functions the Network object can use to employ the sector system.
-   * The sector system is always used by Network, though the benefits only apply to the use of clustering.
-   * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
-   */
 
-  /**
-   * This function is only called by the setData function of the Network object.
-   * This loads the global references into the active sector. This initializes the sector.
-   *
-   * @private
-   */
-  exports._putDataInSector = function() {
-    this.sectors["active"][this._sector()].nodes = this.nodes;
-    this.sectors["active"][this._sector()].edges = this.edges;
-    this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices;
-  };
-
-
-  /**
-   *  /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied (active) sector. If a type is defined, do the specific type
-   *
-   * @param {String} sectorId
-   * @param {String} [sectorType] | "active" or "frozen"
-   * @private
-   */
-  exports._switchToSector = function(sectorId, sectorType) {
-    if (sectorType === undefined || sectorType == "active") {
-      this._switchToActiveSector(sectorId);
-    }
-    else {
-      this._switchToFrozenSector(sectorId);
-    }
-  };
-
-
-  /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied active sector.
-   *
-   * @param sectorId
-   * @private
-   */
-  exports._switchToActiveSector = function(sectorId) {
-    this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"];
-    this.nodes       = this.sectors["active"][sectorId]["nodes"];
-    this.edges       = this.sectors["active"][sectorId]["edges"];
-  };
-
-
-  /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied active sector.
-   *
-   * @private
-   */
-  exports._switchToSupportSector = function() {
-    this.nodeIndices = this.sectors["support"]["nodeIndices"];
-    this.nodes       = this.sectors["support"]["nodes"];
-    this.edges       = this.sectors["support"]["edges"];
-  };
-
-
-  /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the supplied frozen sector.
-   *
-   * @param sectorId
-   * @private
-   */
-  exports._switchToFrozenSector = function(sectorId) {
-    this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"];
-    this.nodes       = this.sectors["frozen"][sectorId]["nodes"];
-    this.edges       = this.sectors["frozen"][sectorId]["edges"];
-  };
-
-
-  /**
-   * This function sets the global references to nodes, edges and nodeIndices back to
-   * those of the currently active sector.
-   *
-   * @private
-   */
-  exports._loadLatestSector = function() {
-    this._switchToSector(this._sector());
-  };
-
-
-  /**
-   * This function returns the currently active sector Id
-   *
-   * @returns {String}
-   * @private
-   */
-  exports._sector = function() {
-    return this.activeSector[this.activeSector.length-1];
-  };
-
-
-  /**
-   * This function returns the previously active sector Id
-   *
-   * @returns {String}
-   * @private
-   */
-  exports._previousSector = function() {
-    if (this.activeSector.length > 1) {
-      return this.activeSector[this.activeSector.length-2];
-    }
-    else {
-      throw new TypeError('there are not enough sectors in the this.activeSector array.');
-    }
-  };
-
-
-  /**
-   * We add the active sector at the end of the this.activeSector array
-   * This ensures it is the currently active sector returned by _sector() and it reaches the top
-   * of the activeSector stack. When we reverse our steps we move from the end to the beginning of this stack.
-   *
-   * @param newId
-   * @private
-   */
-  exports._setActiveSector = function(newId) {
-    this.activeSector.push(newId);
-  };
-
-
-  /**
-   * We remove the currently active sector id from the active sector stack. This happens when
-   * we reactivate the previously active sector
-   *
-   * @private
-   */
-  exports._forgetLastSector = function() {
-    this.activeSector.pop();
-  };
-
-
-  /**
-   * This function creates a new active sector with the supplied newId. This newId
-   * is the expanding node id.
-   *
-   * @param {String} newId   | Id of the new active sector
-   * @private
-   */
-  exports._createNewSector = function(newId) {
-    // create the new sector
-    this.sectors["active"][newId] = {"nodes":{},
-                                     "edges":{},
-                                     "nodeIndices":[],
-                                     "formationScale": this.scale,
-                                     "drawingNode": undefined};
-
-    // create the new sector render node. This gives visual feedback that you are in a new sector.
-    this.sectors["active"][newId]['drawingNode'] = new Node(
-        {id:newId,
-          color: {
-            background: "#eaefef",
-            border: "495c5e"
+      // get the regex to find the next token
+      function getParseRegexForToken(token, config) {
+          var a, strict = config._strict;
+          switch (token) {
+          case 'Q':
+              return parseTokenOneDigit;
+          case 'DDDD':
+              return parseTokenThreeDigits;
+          case 'YYYY':
+          case 'GGGG':
+          case 'gggg':
+              return strict ? parseTokenFourDigits : parseTokenOneToFourDigits;
+          case 'Y':
+          case 'G':
+          case 'g':
+              return parseTokenSignedNumber;
+          case 'YYYYYY':
+          case 'YYYYY':
+          case 'GGGGG':
+          case 'ggggg':
+              return strict ? parseTokenSixDigits : parseTokenOneToSixDigits;
+          case 'S':
+              if (strict) {
+                  return parseTokenOneDigit;
+              }
+              /* falls through */
+          case 'SS':
+              if (strict) {
+                  return parseTokenTwoDigits;
+              }
+              /* falls through */
+          case 'SSS':
+              if (strict) {
+                  return parseTokenThreeDigits;
+              }
+              /* falls through */
+          case 'DDD':
+              return parseTokenOneToThreeDigits;
+          case 'MMM':
+          case 'MMMM':
+          case 'dd':
+          case 'ddd':
+          case 'dddd':
+              return parseTokenWord;
+          case 'a':
+          case 'A':
+              return config._locale._meridiemParse;
+          case 'x':
+              return parseTokenOffsetMs;
+          case 'X':
+              return parseTokenTimestampMs;
+          case 'Z':
+          case 'ZZ':
+              return parseTokenTimezone;
+          case 'T':
+              return parseTokenT;
+          case 'SSSS':
+              return parseTokenDigits;
+          case 'MM':
+          case 'DD':
+          case 'YY':
+          case 'GG':
+          case 'gg':
+          case 'HH':
+          case 'hh':
+          case 'mm':
+          case 'ss':
+          case 'ww':
+          case 'WW':
+              return strict ? parseTokenTwoDigits : parseTokenOneOrTwoDigits;
+          case 'M':
+          case 'D':
+          case 'd':
+          case 'H':
+          case 'h':
+          case 'm':
+          case 's':
+          case 'w':
+          case 'W':
+          case 'e':
+          case 'E':
+              return parseTokenOneOrTwoDigits;
+          case 'Do':
+              return strict ? config._locale._ordinalParse : config._locale._ordinalParseLenient;
+          default :
+              a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), 'i'));
+              return a;
           }
-        },{},{},this.constants);
-    this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
-  };
-
-
-  /**
-   * This function removes the currently active sector. This is called when we create a new
-   * active sector.
-   *
-   * @param {String} sectorId   | Id of the active sector that will be removed
-   * @private
-   */
-  exports._deleteActiveSector = function(sectorId) {
-    delete this.sectors["active"][sectorId];
-  };
-
-
-  /**
-   * This function removes the currently active sector. This is called when we reactivate
-   * the previously active sector.
-   *
-   * @param {String} sectorId   | Id of the active sector that will be removed
-   * @private
-   */
-  exports._deleteFrozenSector = function(sectorId) {
-    delete this.sectors["frozen"][sectorId];
-  };
-
-
-  /**
-   * Freezing an active sector means moving it from the "active" object to the "frozen" object.
-   * We copy the references, then delete the active entree.
-   *
-   * @param sectorId
-   * @private
-   */
-  exports._freezeSector = function(sectorId) {
-    // we move the set references from the active to the frozen stack.
-    this.sectors["frozen"][sectorId] = this.sectors["active"][sectorId];
-
-    // we have moved the sector data into the frozen set, we now remove it from the active set
-    this._deleteActiveSector(sectorId);
-  };
-
-
-  /**
-   * This is the reverse operation of _freezeSector. Activating means moving the sector from the "frozen"
-   * object to the "active" object.
-   *
-   * @param sectorId
-   * @private
-   */
-  exports._activateSector = function(sectorId) {
-    // we move the set references from the frozen to the active stack.
-    this.sectors["active"][sectorId] = this.sectors["frozen"][sectorId];
-
-    // we have moved the sector data into the active set, we now remove it from the frozen stack
-    this._deleteFrozenSector(sectorId);
-  };
-
-
-  /**
-   * This function merges the data from the currently active sector with a frozen sector. This is used
-   * in the process of reverting back to the previously active sector.
-   * The data that is placed in the frozen (the previously active) sector is the node that has been removed from it
-   * upon the creation of a new active sector.
-   *
-   * @param sectorId
-   * @private
-   */
-  exports._mergeThisWithFrozen = function(sectorId) {
-    // copy all nodes
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        this.sectors["frozen"][sectorId]["nodes"][nodeId] = this.nodes[nodeId];
-      }
-    }
-
-    // copy all edges (if not fully clustered, else there are no edges)
-    for (var edgeId in this.edges) {
-      if (this.edges.hasOwnProperty(edgeId)) {
-        this.sectors["frozen"][sectorId]["edges"][edgeId] = this.edges[edgeId];
       }
-    }
-
-    // merge the nodeIndices
-    for (var i = 0; i < this.nodeIndices.length; i++) {
-      this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
-    }
-  };
-
-
-  /**
-   * This clusters the sector to one cluster. It was a single cluster before this process started so
-   * we revert to that state. The clusterToFit function with a maximum size of 1 node does this.
-   *
-   * @private
-   */
-  exports._collapseThisToSingleCluster = function() {
-    this.clusterToFit(1,false);
-  };
-
-
-  /**
-   * We create a new active sector from the node that we want to open.
-   *
-   * @param node
-   * @private
-   */
-  exports._addSector = function(node) {
-    // this is the currently active sector
-    var sector = this._sector();
-
-  //    // this should allow me to select nodes from a frozen set.
-  //    if (this.sectors['active'][sector]["nodes"].hasOwnProperty(node.id)) {
-  //      console.log("the node is part of the active sector");
-  //    }
-  //    else {
-  //      console.log("I dont know what the fuck happened!!");
-  //    }
-
-    // when we switch to a new sector, we remove the node that will be expanded from the current nodes list.
-    delete this.nodes[node.id];
-
-    var unqiueIdentifier = util.randomUUID();
-
-    // we fully freeze the currently active sector
-    this._freezeSector(sector);
-
-    // we create a new active sector. This sector has the Id of the node to ensure uniqueness
-    this._createNewSector(unqiueIdentifier);
-
-    // we add the active sector to the sectors array to be able to revert these steps later on
-    this._setActiveSector(unqiueIdentifier);
-
-    // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
-    this._switchToSector(this._sector());
-
-    // finally we add the node we removed from our previous active sector to the new active sector
-    this.nodes[node.id] = node;
-  };
-
-
-  /**
-   * We close the sector that is currently open and revert back to the one before.
-   * If the active sector is the "default" sector, nothing happens.
-   *
-   * @private
-   */
-  exports._collapseSector = function() {
-    // the currently active sector
-    var sector = this._sector();
-
-    // we cannot collapse the default sector
-    if (sector != "default") {
-      if ((this.nodeIndices.length == 1) ||
-       (this.sectors["active"][sector]["drawingNode"].width*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
-       (this.sectors["active"][sector]["drawingNode"].height*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
-        var previousSector = this._previousSector();
-
-        // we collapse the sector back to a single cluster
-        this._collapseThisToSingleCluster();
-
-        // we move the remaining nodes, edges and nodeIndices to the previous sector.
-        // This previous sector is the one we will reactivate
-        this._mergeThisWithFrozen(previousSector);
-
-        // the previously active (frozen) sector now has all the data from the currently active sector.
-        // we can now delete the active sector.
-        this._deleteActiveSector(sector);
-
-        // we activate the previously active (and currently frozen) sector.
-        this._activateSector(previousSector);
-
-        // we load the references from the newly active sector into the global references
-        this._switchToSector(previousSector);
-
-        // we forget the previously active sector because we reverted to the one before
-        this._forgetLastSector();
-
-        // finally, we update the node index list.
-        this._updateNodeIndexList();
-
-        // we refresh the list with calulation nodes and calculation node indices.
-        this._updateCalculationNodes();
-      }
-    }
-  };
 
+      function utcOffsetFromString(string) {
+          string = string || '';
+          var possibleTzMatches = (string.match(parseTokenTimezone) || []),
+              tzChunk = possibleTzMatches[possibleTzMatches.length - 1] || [],
+              parts = (tzChunk + '').match(parseTimezoneChunker) || ['-', 0, 0],
+              minutes = +(parts[1] * 60) + toInt(parts[2]);
 
-  /**
-   * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
-   *
-   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we dont pass the function itself because then the "this" is the window object
-   *                              |   instead of the Network object
-   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
-   * @private
-   */
-  exports._doInAllActiveSectors = function(runFunction,argument) {
-    var returnValues = [];
-    if (argument === undefined) {
-      for (var sector in this.sectors["active"]) {
-        if (this.sectors["active"].hasOwnProperty(sector)) {
-          // switch the global references to those of this sector
-          this._switchToActiveSector(sector);
-          returnValues.push( this[runFunction]() );
-        }
-      }
-    }
-    else {
-      for (var sector in this.sectors["active"]) {
-        if (this.sectors["active"].hasOwnProperty(sector)) {
-          // switch the global references to those of this sector
-          this._switchToActiveSector(sector);
-          var args = Array.prototype.splice.call(arguments, 1);
-          if (args.length > 1) {
-            returnValues.push( this[runFunction](args[0],args[1]) );
-          }
-          else {
-            returnValues.push( this[runFunction](argument) );
-          }
-        }
+          return parts[0] === '+' ? minutes : -minutes;
       }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-    return returnValues;
-  };
-
 
-  /**
-   * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
-   *
-   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we dont pass the function itself because then the "this" is the window object
-   *                              |   instead of the Network object
-   * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
-   * @private
-   */
-  exports._doInSupportSector = function(runFunction,argument) {
-    var returnValues = false;
-    if (argument === undefined) {
-      this._switchToSupportSector();
-      returnValues = this[runFunction]();
-    }
-    else {
-      this._switchToSupportSector();
-      var args = Array.prototype.splice.call(arguments, 1);
-      if (args.length > 1) {
-        returnValues = this[runFunction](args[0],args[1]);
-      }
-      else {
-        returnValues = this[runFunction](argument);
-      }
-    }
-    // we revert the global references back to our active sector
-    this._loadLatestSector();
-    return returnValues;
-  };
+      // function to convert string input to date
+      function addTimeToArrayFromToken(token, input, config) {
+          var a, datePartArray = config._a;
 
+          switch (token) {
+          // QUARTER
+          case 'Q':
+              if (input != null) {
+                  datePartArray[MONTH] = (toInt(input) - 1) * 3;
+              }
+              break;
+          // MONTH
+          case 'M' : // fall through to MM
+          case 'MM' :
+              if (input != null) {
+                  datePartArray[MONTH] = toInt(input) - 1;
+              }
+              break;
+          case 'MMM' : // fall through to MMMM
+          case 'MMMM' :
+              a = config._locale.monthsParse(input, token, config._strict);
+              // if we didn't find a month name, mark the date as invalid.
+              if (a != null) {
+                  datePartArray[MONTH] = a;
+              } else {
+                  config._pf.invalidMonth = input;
+              }
+              break;
+          // DAY OF MONTH
+          case 'D' : // fall through to DD
+          case 'DD' :
+              if (input != null) {
+                  datePartArray[DATE] = toInt(input);
+              }
+              break;
+          case 'Do' :
+              if (input != null) {
+                  datePartArray[DATE] = toInt(parseInt(
+                              input.match(/\d{1,2}/)[0], 10));
+              }
+              break;
+          // DAY OF YEAR
+          case 'DDD' : // fall through to DDDD
+          case 'DDDD' :
+              if (input != null) {
+                  config._dayOfYear = toInt(input);
+              }
 
-  /**
-   * This runs a function in all frozen sectors. This is used in the _redraw().
-   *
-   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we don't pass the function itself because then the "this" is the window object
-   *                              |   instead of the Network object
-   * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
-   * @private
-   */
-  exports._doInAllFrozenSectors = function(runFunction,argument) {
-    if (argument === undefined) {
-      for (var sector in this.sectors["frozen"]) {
-        if (this.sectors["frozen"].hasOwnProperty(sector)) {
-          // switch the global references to those of this sector
-          this._switchToFrozenSector(sector);
-          this[runFunction]();
-        }
-      }
-    }
-    else {
-      for (var sector in this.sectors["frozen"]) {
-        if (this.sectors["frozen"].hasOwnProperty(sector)) {
-          // switch the global references to those of this sector
-          this._switchToFrozenSector(sector);
-          var args = Array.prototype.splice.call(arguments, 1);
-          if (args.length > 1) {
-            this[runFunction](args[0],args[1]);
-          }
-          else {
-            this[runFunction](argument);
+              break;
+          // YEAR
+          case 'YY' :
+              datePartArray[YEAR] = moment.parseTwoDigitYear(input);
+              break;
+          case 'YYYY' :
+          case 'YYYYY' :
+          case 'YYYYYY' :
+              datePartArray[YEAR] = toInt(input);
+              break;
+          // AM / PM
+          case 'a' : // fall through to A
+          case 'A' :
+              config._meridiem = input;
+              // config._isPm = config._locale.isPM(input);
+              break;
+          // HOUR
+          case 'h' : // fall through to hh
+          case 'hh' :
+              config._pf.bigHour = true;
+              /* falls through */
+          case 'H' : // fall through to HH
+          case 'HH' :
+              datePartArray[HOUR] = toInt(input);
+              break;
+          // MINUTE
+          case 'm' : // fall through to mm
+          case 'mm' :
+              datePartArray[MINUTE] = toInt(input);
+              break;
+          // SECOND
+          case 's' : // fall through to ss
+          case 'ss' :
+              datePartArray[SECOND] = toInt(input);
+              break;
+          // MILLISECOND
+          case 'S' :
+          case 'SS' :
+          case 'SSS' :
+          case 'SSSS' :
+              datePartArray[MILLISECOND] = toInt(('0.' + input) * 1000);
+              break;
+          // UNIX OFFSET (MILLISECONDS)
+          case 'x':
+              config._d = new Date(toInt(input));
+              break;
+          // UNIX TIMESTAMP WITH MS
+          case 'X':
+              config._d = new Date(parseFloat(input) * 1000);
+              break;
+          // TIMEZONE
+          case 'Z' : // fall through to ZZ
+          case 'ZZ' :
+              config._useUTC = true;
+              config._tzm = utcOffsetFromString(input);
+              break;
+          // WEEKDAY - human
+          case 'dd':
+          case 'ddd':
+          case 'dddd':
+              a = config._locale.weekdaysParse(input);
+              // if we didn't get a weekday name, mark the date as invalid
+              if (a != null) {
+                  config._w = config._w || {};
+                  config._w['d'] = a;
+              } else {
+                  config._pf.invalidWeekday = input;
+              }
+              break;
+          // WEEK, WEEK DAY - numeric
+          case 'w':
+          case 'ww':
+          case 'W':
+          case 'WW':
+          case 'd':
+          case 'e':
+          case 'E':
+              token = token.substr(0, 1);
+              /* falls through */
+          case 'gggg':
+          case 'GGGG':
+          case 'GGGGG':
+              token = token.substr(0, 2);
+              if (input) {
+                  config._w = config._w || {};
+                  config._w[token] = toInt(input);
+              }
+              break;
+          case 'gg':
+          case 'GG':
+              config._w = config._w || {};
+              config._w[token] = moment.parseTwoDigitYear(input);
           }
-        }
       }
-    }
-    this._loadLatestSector();
-  };
-
 
-  /**
-   * This runs a function in all sectors. This is used in the _redraw().
-   *
-   * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
-   *                              |   we don't pass the function itself because then the "this" is the window object
-   *                              |   instead of the Network object
-   * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
-   * @private
-   */
-  exports._doInAllSectors = function(runFunction,argument) {
-    var args = Array.prototype.splice.call(arguments, 1);
-    if (argument === undefined) {
-      this._doInAllActiveSectors(runFunction);
-      this._doInAllFrozenSectors(runFunction);
-    }
-    else {
-      if (args.length > 1) {
-        this._doInAllActiveSectors(runFunction,args[0],args[1]);
-        this._doInAllFrozenSectors(runFunction,args[0],args[1]);
-      }
-      else {
-        this._doInAllActiveSectors(runFunction,argument);
-        this._doInAllFrozenSectors(runFunction,argument);
-      }
-    }
-  };
-
-
-  /**
-   * This clears the nodeIndices list. We cannot use this.nodeIndices = [] because we would break the link with the
-   * active sector. Thus we clear the nodeIndices in the active sector, then reconnect the this.nodeIndices to it.
-   *
-   * @private
-   */
-  exports._clearNodeIndexList = function() {
-    var sector = this._sector();
-    this.sectors["active"][sector]["nodeIndices"] = [];
-    this.nodeIndices = this.sectors["active"][sector]["nodeIndices"];
-  };
+      function dayOfYearFromWeekInfo(config) {
+          var w, weekYear, week, weekday, dow, doy, temp;
 
+          w = config._w;
+          if (w.GG != null || w.W != null || w.E != null) {
+              dow = 1;
+              doy = 4;
 
-  /**
-   * Draw the encompassing sector node
-   *
-   * @param ctx
-   * @param sectorType
-   * @private
-   */
-  exports._drawSectorNodes = function(ctx,sectorType) {
-    var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
-    for (var sector in this.sectors[sectorType]) {
-      if (this.sectors[sectorType].hasOwnProperty(sector)) {
-        if (this.sectors[sectorType][sector]["drawingNode"] !== undefined) {
+              // TODO: We need to take the current isoWeekYear, but that depends on
+              // how we interpret now (local, utc, fixed offset). So create
+              // a now version of current config (take local/utc/offset flags, and
+              // create now).
+              weekYear = dfl(w.GG, config._a[YEAR], weekOfYear(moment(), 1, 4).year);
+              week = dfl(w.W, 1);
+              weekday = dfl(w.E, 1);
+          } else {
+              dow = config._locale._week.dow;
+              doy = config._locale._week.doy;
 
-          this._switchToSector(sector,sectorType);
+              weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
+              week = dfl(w.w, 1);
 
-          minY = 1e9; maxY = -1e9; minX = 1e9; maxX = -1e9;
-          for (var nodeId in this.nodes) {
-            if (this.nodes.hasOwnProperty(nodeId)) {
-              node = this.nodes[nodeId];
-              node.resize(ctx);
-              if (minX > node.x - 0.5 * node.width) {minX = node.x - 0.5 * node.width;}
-              if (maxX < node.x + 0.5 * node.width) {maxX = node.x + 0.5 * node.width;}
-              if (minY > node.y - 0.5 * node.height) {minY = node.y - 0.5 * node.height;}
-              if (maxY < node.y + 0.5 * node.height) {maxY = node.y + 0.5 * node.height;}
-            }
+              if (w.d != null) {
+                  // weekday -- low day numbers are considered next week
+                  weekday = w.d;
+                  if (weekday < dow) {
+                      ++week;
+                  }
+              } else if (w.e != null) {
+                  // local weekday -- counting starts from begining of week
+                  weekday = w.e + dow;
+              } else {
+                  // default to begining of week
+                  weekday = dow;
+              }
           }
-          node = this.sectors[sectorType][sector]["drawingNode"];
-          node.x = 0.5 * (maxX + minX);
-          node.y = 0.5 * (maxY + minY);
-          node.width = 2 * (node.x - minX);
-          node.height = 2 * (node.y - minY);
-          node.options.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
-          node.setScale(this.scale);
-          node._drawCircle(ctx);
-        }
-      }
-    }
-  };
-
-  exports._drawAllSectorNodes = function(ctx) {
-    this._drawSectorNodes(ctx,"frozen");
-    this._drawSectorNodes(ctx,"active");
-    this._loadLatestSector();
-  };
-
-
-/***/ },
-/* 63 */
-/***/ function(module, exports, __webpack_require__) {
-
-  var Node = __webpack_require__(40);
-
-  /**
-   * This function can be called from the _doInAllSectors function
-   *
-   * @param object
-   * @param overlappingNodes
-   * @private
-   */
-  exports._getNodesOverlappingWith = function(object, overlappingNodes) {
-    var nodes = this.nodes;
-    for (var nodeId in nodes) {
-      if (nodes.hasOwnProperty(nodeId)) {
-        if (nodes[nodeId].isOverlappingWith(object)) {
-          overlappingNodes.push(nodeId);
-        }
-      }
-    }
-  };
-
-  /**
-   * retrieve all nodes overlapping with given object
-   * @param {Object} object  An object with parameters left, top, right, bottom
-   * @return {Number[]}   An array with id's of the overlapping nodes
-   * @private
-   */
-  exports._getAllNodesOverlappingWith = function (object) {
-    var overlappingNodes = [];
-    this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes);
-    return overlappingNodes;
-  };
-
-
-  /**
-   * Return a position object in canvasspace from a single point in screenspace
-   *
-   * @param pointer
-   * @returns {{left: number, top: number, right: number, bottom: number}}
-   * @private
-   */
-  exports._pointerToPositionObject = function(pointer) {
-    var x = this._XconvertDOMtoCanvas(pointer.x);
-    var y = this._YconvertDOMtoCanvas(pointer.y);
-
-    return {
-      left:   x,
-      top:    y,
-      right:  x,
-      bottom: y
-    };
-  };
+          temp = dayOfYearFromWeeks(weekYear, week, weekday, doy, dow);
 
+          config._a[YEAR] = temp.year;
+          config._dayOfYear = temp.dayOfYear;
+      }
 
-  /**
-   * Get the top node at the a specific point (like a click)
-   *
-   * @param {{x: Number, y: Number}} pointer
-   * @return {Node | null} node
-   * @private
-   */
-  exports._getNodeAt = function (pointer) {
-    // we first check if this is an navigation controls element
-    var positionObject = this._pointerToPositionObject(pointer);
-    var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
+      // convert an array to a date.
+      // the array should mirror the parameters below
+      // note: all values past the year are optional and will default to the lowest possible value.
+      // [year, month, day , hour, minute, second, millisecond]
+      function dateFromConfig(config) {
+          var i, date, input = [], currentDate, yearToUse;
 
-    // if there are overlapping nodes, select the last one, this is the
-    // one which is drawn on top of the others
-    if (overlappingNodes.length > 0) {
-       return this.nodes[overlappingNodes[overlappingNodes.length - 1]];
-    }
-    else {
-      return null;
-    }
-  };
+          if (config._d) {
+              return;
+          }
 
+          currentDate = currentDateArray(config);
 
-  /**
-   * retrieve all edges overlapping with given object, selector is around center
-   * @param {Object} object  An object with parameters left, top, right, bottom
-   * @return {Number[]}   An array with id's of the overlapping nodes
-   * @private
-   */
-  exports._getEdgesOverlappingWith = function (object, overlappingEdges) {
-    var edges = this.edges;
-    for (var edgeId in edges) {
-      if (edges.hasOwnProperty(edgeId)) {
-        if (edges[edgeId].isOverlappingWith(object)) {
-          overlappingEdges.push(edgeId);
-        }
-      }
-    }
-  };
+          //compute day of the year from weeks and weekdays
+          if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
+              dayOfYearFromWeekInfo(config);
+          }
 
+          //if the day of the year is set, figure out what it is
+          if (config._dayOfYear) {
+              yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
 
-  /**
-   * retrieve all nodes overlapping with given object
-   * @param {Object} object  An object with parameters left, top, right, bottom
-   * @return {Number[]}   An array with id's of the overlapping nodes
-   * @private
-   */
-  exports._getAllEdgesOverlappingWith = function (object) {
-    var overlappingEdges = [];
-    this._doInAllActiveSectors("_getEdgesOverlappingWith",object,overlappingEdges);
-    return overlappingEdges;
-  };
+              if (config._dayOfYear > daysInYear(yearToUse)) {
+                  config._pf._overflowDayOfYear = true;
+              }
 
-  /**
-   * Place holder. To implement change the _getNodeAt to a _getObjectAt. Have the _getObjectAt call
-   * _getNodeAt and _getEdgesAt, then priortize the selection to user preferences.
-   *
-   * @param pointer
-   * @returns {null}
-   * @private
-   */
-  exports._getEdgeAt = function(pointer) {
-    var positionObject = this._pointerToPositionObject(pointer);
-    var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
+              date = makeUTCDate(yearToUse, 0, config._dayOfYear);
+              config._a[MONTH] = date.getUTCMonth();
+              config._a[DATE] = date.getUTCDate();
+          }
 
-    if (overlappingEdges.length > 0) {
-      return this.edges[overlappingEdges[overlappingEdges.length - 1]];
-    }
-    else {
-      return null;
-    }
-  };
+          // Default to current date.
+          // * if no year, month, day of month are given, default to today
+          // * if day of month is given, default month and year
+          // * if month is given, default only year
+          // * if year is given, don't default anything
+          for (i = 0; i < 3 && config._a[i] == null; ++i) {
+              config._a[i] = input[i] = currentDate[i];
+          }
 
+          // Zero out whatever was not defaulted, including time
+          for (; i < 7; i++) {
+              config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
+          }
 
-  /**
-   * Add object to the selection array.
-   *
-   * @param obj
-   * @private
-   */
-  exports._addToSelection = function(obj) {
-    if (obj instanceof Node) {
-      this.selectionObj.nodes[obj.id] = obj;
-    }
-    else {
-      this.selectionObj.edges[obj.id] = obj;
-    }
-  };
+          // Check for 24:00:00.000
+          if (config._a[HOUR] === 24 &&
+                  config._a[MINUTE] === 0 &&
+                  config._a[SECOND] === 0 &&
+                  config._a[MILLISECOND] === 0) {
+              config._nextDay = true;
+              config._a[HOUR] = 0;
+          }
 
-  /**
-   * Add object to the selection array.
-   *
-   * @param obj
-   * @private
-   */
-  exports._addToHover = function(obj) {
-    if (obj instanceof Node) {
-      this.hoverObj.nodes[obj.id] = obj;
-    }
-    else {
-      this.hoverObj.edges[obj.id] = obj;
-    }
-  };
+          config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
+          // Apply timezone offset from input. The actual utcOffset can be changed
+          // with parseZone.
+          if (config._tzm != null) {
+              config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);
+          }
 
+          if (config._nextDay) {
+              config._a[HOUR] = 24;
+          }
+      }
 
-  /**
-   * Remove a single option from selection.
-   *
-   * @param {Object} obj
-   * @private
-   */
-  exports._removeFromSelection = function(obj) {
-    if (obj instanceof Node) {
-      delete this.selectionObj.nodes[obj.id];
-    }
-    else {
-      delete this.selectionObj.edges[obj.id];
-    }
-  };
+      function dateFromObject(config) {
+          var normalizedInput;
 
-  /**
-   * Unselect all. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectAll = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        this.selectionObj.nodes[nodeId].unselect();
+          if (config._d) {
+              return;
+          }
+
+          normalizedInput = normalizeObjectUnits(config._i);
+          config._a = [
+              normalizedInput.year,
+              normalizedInput.month,
+              normalizedInput.day || normalizedInput.date,
+              normalizedInput.hour,
+              normalizedInput.minute,
+              normalizedInput.second,
+              normalizedInput.millisecond
+          ];
+
+          dateFromConfig(config);
       }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        this.selectionObj.edges[edgeId].unselect();
+
+      function currentDateArray(config) {
+          var now = new Date();
+          if (config._useUTC) {
+              return [
+                  now.getUTCFullYear(),
+                  now.getUTCMonth(),
+                  now.getUTCDate()
+              ];
+          } else {
+              return [now.getFullYear(), now.getMonth(), now.getDate()];
+          }
       }
-    }
 
-    this.selectionObj = {nodes:{},edges:{}};
+      // date from string and format string
+      function makeDateFromStringAndFormat(config) {
+          if (config._f === moment.ISO_8601) {
+              parseISO(config);
+              return;
+          }
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+          config._a = [];
+          config._pf.empty = true;
 
-  /**
-   * Unselect all clusters. The selectionObj is useful for this.
-   *
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._unselectClusters = function(doNotTrigger) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
+          // This array is used to make a Date, either with `new Date` or `Date.UTC`
+          var string = '' + config._i,
+              i, parsedInput, tokens, token, skipped,
+              stringLength = string.length,
+              totalParsedInputLength = 0;
 
-    for (var nodeId in this.selectionObj.nodes) {
-      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
-          this.selectionObj.nodes[nodeId].unselect();
-          this._removeFromSelection(this.selectionObj.nodes[nodeId]);
-        }
-      }
-    }
+          tokens = expandFormat(config._f, config._locale).match(formattingTokens) || [];
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+          for (i = 0; i < tokens.length; i++) {
+              token = tokens[i];
+              parsedInput = (string.match(getParseRegexForToken(token, config)) || [])[0];
+              if (parsedInput) {
+                  skipped = string.substr(0, string.indexOf(parsedInput));
+                  if (skipped.length > 0) {
+                      config._pf.unusedInput.push(skipped);
+                  }
+                  string = string.slice(string.indexOf(parsedInput) + parsedInput.length);
+                  totalParsedInputLength += parsedInput.length;
+              }
+              // don't parse if it's not a known token
+              if (formatTokenFunctions[token]) {
+                  if (parsedInput) {
+                      config._pf.empty = false;
+                  }
+                  else {
+                      config._pf.unusedTokens.push(token);
+                  }
+                  addTimeToArrayFromToken(token, parsedInput, config);
+              }
+              else if (config._strict && !parsedInput) {
+                  config._pf.unusedTokens.push(token);
+              }
+          }
 
+          // add remaining unparsed input length to the string
+          config._pf.charsLeftOver = stringLength - totalParsedInputLength;
+          if (string.length > 0) {
+              config._pf.unusedInput.push(string);
+          }
 
-  /**
-   * return the number of selected nodes
-   *
-   * @returns {number}
-   * @private
-   */
-  exports._getSelectedNodeCount = function() {
-    var count = 0;
-    for (var nodeId in this.selectionObj.nodes) {
-      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        count += 1;
+          // clear _12h flag if hour is <= 12
+          if (config._pf.bigHour === true && config._a[HOUR] <= 12) {
+              config._pf.bigHour = undefined;
+          }
+          // handle meridiem
+          config._a[HOUR] = meridiemFixWrap(config._locale, config._a[HOUR],
+                  config._meridiem);
+          dateFromConfig(config);
+          checkOverflow(config);
       }
-    }
-    return count;
-  };
 
-  /**
-   * return the selected node
-   *
-   * @returns {number}
-   * @private
-   */
-  exports._getSelectedNode = function() {
-    for (var nodeId in this.selectionObj.nodes) {
-      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        return this.selectionObj.nodes[nodeId];
+      function unescapeFormat(s) {
+          return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
+              return p1 || p2 || p3 || p4;
+          });
       }
-    }
-    return null;
-  };
 
-  /**
-   * return the selected edge
-   *
-   * @returns {number}
-   * @private
-   */
-  exports._getSelectedEdge = function() {
-    for (var edgeId in this.selectionObj.edges) {
-      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        return this.selectionObj.edges[edgeId];
+      // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
+      function regexpEscape(s) {
+          return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
       }
-    }
-    return null;
-  };
 
+      // date from string and array of format strings
+      function makeDateFromStringAndArray(config) {
+          var tempConfig,
+              bestMoment,
 
-  /**
-   * return the number of selected edges
-   *
-   * @returns {number}
-   * @private
-   */
-  exports._getSelectedEdgeCount = function() {
-    var count = 0;
-    for (var edgeId in this.selectionObj.edges) {
-      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        count += 1;
-      }
-    }
-    return count;
-  };
+              scoreToBeat,
+              i,
+              currentScore;
 
+          if (config._f.length === 0) {
+              config._pf.invalidFormat = true;
+              config._d = new Date(NaN);
+              return;
+          }
 
-  /**
-   * return the number of selected objects.
-   *
-   * @returns {number}
-   * @private
-   */
-  exports._getSelectedObjectCount = function() {
-    var count = 0;
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        count += 1;
-      }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        count += 1;
-      }
-    }
-    return count;
-  };
+          for (i = 0; i < config._f.length; i++) {
+              currentScore = 0;
+              tempConfig = copyConfig({}, config);
+              if (config._useUTC != null) {
+                  tempConfig._useUTC = config._useUTC;
+              }
+              tempConfig._pf = defaultParsingFlags();
+              tempConfig._f = config._f[i];
+              makeDateFromStringAndFormat(tempConfig);
 
-  /**
-   * Check if anything is selected
-   *
-   * @returns {boolean}
-   * @private
-   */
-  exports._selectionIsEmpty = function() {
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        return false;
-      }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        return false;
-      }
-    }
-    return true;
-  };
+              if (!isValid(tempConfig)) {
+                  continue;
+              }
 
+              // if there is any input that was not parsed add a penalty for that format
+              currentScore += tempConfig._pf.charsLeftOver;
 
-  /**
-   * check if one of the selected nodes is a cluster.
-   *
-   * @returns {boolean}
-   * @private
-   */
-  exports._clusterInSelection = function() {
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
+              //or tokens
+              currentScore += tempConfig._pf.unusedTokens.length * 10;
 
-  /**
-   * select the edges connected to the node that is being selected
-   *
-   * @param {Node} node
-   * @private
-   */
-  exports._selectConnectedEdges = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      var edge = node.dynamicEdges[i];
-      edge.select();
-      this._addToSelection(edge);
-    }
-  };
+              tempConfig._pf.score = currentScore;
 
-  /**
-   * select the edges connected to the node that is being selected
-   *
-   * @param {Node} node
-   * @private
-   */
-  exports._hoverConnectedEdges = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      var edge = node.dynamicEdges[i];
-      edge.hover = true;
-      this._addToHover(edge);
-    }
-  };
+              if (scoreToBeat == null || currentScore < scoreToBeat) {
+                  scoreToBeat = currentScore;
+                  bestMoment = tempConfig;
+              }
+          }
 
+          extend(config, bestMoment || tempConfig);
+      }
 
-  /**
-   * unselect the edges connected to the node that is being selected
-   *
-   * @param {Node} node
-   * @private
-   */
-  exports._unselectConnectedEdges = function(node) {
-    for (var i = 0; i < node.dynamicEdges.length; i++) {
-      var edge = node.dynamicEdges[i];
-      edge.unselect();
-      this._removeFromSelection(edge);
-    }
-  };
+      // date from iso format
+      function parseISO(config) {
+          var i, l,
+              string = config._i,
+              match = isoRegex.exec(string);
+
+          if (match) {
+              config._pf.iso = true;
+              for (i = 0, l = isoDates.length; i < l; i++) {
+                  if (isoDates[i][1].exec(string)) {
+                      // match[5] should be 'T' or undefined
+                      config._f = isoDates[i][0] + (match[6] || ' ');
+                      break;
+                  }
+              }
+              for (i = 0, l = isoTimes.length; i < l; i++) {
+                  if (isoTimes[i][1].exec(string)) {
+                      config._f += isoTimes[i][0];
+                      break;
+                  }
+              }
+              if (string.match(parseTokenTimezone)) {
+                  config._f += 'Z';
+              }
+              makeDateFromStringAndFormat(config);
+          } else {
+              config._isValid = false;
+          }
+      }
 
+      // date from iso format or fallback
+      function makeDateFromString(config) {
+          parseISO(config);
+          if (config._isValid === false) {
+              delete config._isValid;
+              moment.createFromInputFallback(config);
+          }
+      }
 
+      function map(arr, fn) {
+          var res = [], i;
+          for (i = 0; i < arr.length; ++i) {
+              res.push(fn(arr[i], i));
+          }
+          return res;
+      }
 
+      function makeDateFromInput(config) {
+          var input = config._i, matched;
+          if (input === undefined) {
+              config._d = new Date();
+          } else if (isDate(input)) {
+              config._d = new Date(+input);
+          } else if ((matched = aspNetJsonRegex.exec(input)) !== null) {
+              config._d = new Date(+matched[1]);
+          } else if (typeof input === 'string') {
+              makeDateFromString(config);
+          } else if (isArray(input)) {
+              config._a = map(input.slice(0), function (obj) {
+                  return parseInt(obj, 10);
+              });
+              dateFromConfig(config);
+          } else if (typeof(input) === 'object') {
+              dateFromObject(config);
+          } else if (typeof(input) === 'number') {
+              // from milliseconds
+              config._d = new Date(input);
+          } else {
+              moment.createFromInputFallback(config);
+          }
+      }
 
-  /**
-   * This is called when someone clicks on a node. either select or deselect it.
-   * If there is an existing selection and we don't want to append to it, clear the existing selection
-   *
-   * @param {Node || Edge} object
-   * @param {Boolean} append
-   * @param {Boolean} [doNotTrigger] | ignore trigger
-   * @private
-   */
-  exports._selectObject = function(object, append, doNotTrigger, highlightEdges, overrideSelectable) {
-    if (doNotTrigger === undefined) {
-      doNotTrigger = false;
-    }
-    if (highlightEdges === undefined) {
-      highlightEdges = true;
-    }
+      function makeDate(y, m, d, h, M, s, ms) {
+          //can't just apply() to create a date:
+          //http://stackoverflow.com/questions/181348/instantiating-a-javascript-object-by-calling-prototype-constructor-apply
+          var date = new Date(y, m, d, h, M, s, ms);
 
-    if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
-      this._unselectAll(true);
-    }
+          //the date constructor doesn't accept years < 1970
+          if (y < 1970) {
+              date.setFullYear(y);
+          }
+          return date;
+      }
 
-    // selectable allows the object to be selected. Override can be used if needed to bypass this.
-    if (object.selected == false && (this.constants.selectable == true || overrideSelectable)) {
-      object.select();
-      this._addToSelection(object);
-      if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
-        this._selectConnectedEdges(object);
+      function makeUTCDate(y) {
+          var date = new Date(Date.UTC.apply(null, arguments));
+          if (y < 1970) {
+              date.setUTCFullYear(y);
+          }
+          return date;
       }
-    }
-    // do not select the object if selectable is false, only add it to selection to allow drag to work
-    else if (object.selected == false) {
-      this._addToSelection(object);
-      doNotTrigger = true;
-    }
-    else {
-      object.unselect();
-      this._removeFromSelection(object);
-    }
 
-    if (doNotTrigger == false) {
-      this.emit('select', this.getSelection());
-    }
-  };
+      function parseWeekday(input, locale) {
+          if (typeof input === 'string') {
+              if (!isNaN(input)) {
+                  input = parseInt(input, 10);
+              }
+              else {
+                  input = locale.weekdaysParse(input);
+                  if (typeof input !== 'number') {
+                      return null;
+                  }
+              }
+          }
+          return input;
+      }
 
+      /************************************
+          Relative Time
+      ************************************/
 
-  /**
-   * This is called when someone clicks on a node. either select or deselect it.
-   * If there is an existing selection and we don't want to append to it, clear the existing selection
-   *
-   * @param {Node || Edge} object
-   * @private
-   */
-  exports._blurObject = function(object) {
-    if (object.hover == true) {
-      object.hover = false;
-      this.emit("blurNode",{node:object.id});
-    }
-  };
 
-  /**
-   * This is called when someone clicks on a node. either select or deselect it.
-   * If there is an existing selection and we don't want to append to it, clear the existing selection
-   *
-   * @param {Node || Edge} object
-   * @private
-   */
-  exports._hoverObject = function(object) {
-    if (object.hover == false) {
-      object.hover = true;
-      this._addToHover(object);
-      if (object instanceof Node) {
-        this.emit("hoverNode",{node:object.id});
+      // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
+      function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) {
+          return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
       }
-    }
-    if (object instanceof Node) {
-      this._hoverConnectedEdges(object);
-    }
-  };
-
 
-  /**
-   * handles the selection part of the touch, only for navigation controls elements;
-   * Touch is triggered before tap, also before hold. Hold triggers after a while.
-   * This is the most responsive solution
-   *
-   * @param {Object} pointer
-   * @private
-   */
-  exports._handleTouch = function(pointer) {
-  };
+      function relativeTime(posNegDuration, withoutSuffix, locale) {
+          var duration = moment.duration(posNegDuration).abs(),
+              seconds = round(duration.as('s')),
+              minutes = round(duration.as('m')),
+              hours = round(duration.as('h')),
+              days = round(duration.as('d')),
+              months = round(duration.as('M')),
+              years = round(duration.as('y')),
 
+              args = seconds < relativeTimeThresholds.s && ['s', seconds] ||
+                  minutes === 1 && ['m'] ||
+                  minutes < relativeTimeThresholds.m && ['mm', minutes] ||
+                  hours === 1 && ['h'] ||
+                  hours < relativeTimeThresholds.h && ['hh', hours] ||
+                  days === 1 && ['d'] ||
+                  days < relativeTimeThresholds.d && ['dd', days] ||
+                  months === 1 && ['M'] ||
+                  months < relativeTimeThresholds.M && ['MM', months] ||
+                  years === 1 && ['y'] || ['yy', years];
 
-  /**
-   * handles the selection part of the tap;
-   *
-   * @param {Object} pointer
-   * @private
-   */
-  exports._handleTap = function(pointer) {
-    var node = this._getNodeAt(pointer);
-    if (node != null) {
-      this._selectObject(node, false);
-    }
-    else {
-      var edge = this._getEdgeAt(pointer);
-      if (edge != null) {
-        this._selectObject(edge, false);
-      }
-      else {
-        this._unselectAll();
+          args[2] = withoutSuffix;
+          args[3] = +posNegDuration > 0;
+          args[4] = locale;
+          return substituteTimeAgo.apply({}, args);
       }
-    }
-    var properties = this.getSelection();
-    properties['pointer'] = {
-      DOM: {x: pointer.x, y: pointer.y},
-      canvas: {x: this._XconvertDOMtoCanvas(pointer.x), y: this._YconvertDOMtoCanvas(pointer.y)}
-    }
-    this.emit("click", properties);
-    this._redraw();
-  };
-
 
-  /**
-   * handles the selection part of the double tap and opens a cluster if needed
-   *
-   * @param {Object} pointer
-   * @private
-   */
-  exports._handleDoubleTap = function(pointer) {
-    var node = this._getNodeAt(pointer);
-    if (node != null && node !== undefined) {
-      // we reset the areaCenter here so the opening of the node will occur
-      this.areaCenter =  {"x" : this._XconvertDOMtoCanvas(pointer.x),
-                          "y" : this._YconvertDOMtoCanvas(pointer.y)};
-      this.openCluster(node);
-    }
-    var properties = this.getSelection();
-    properties['pointer'] = {
-      DOM: {x: pointer.x, y: pointer.y},
-      canvas: {x: this._XconvertDOMtoCanvas(pointer.x), y: this._YconvertDOMtoCanvas(pointer.y)}
-    }
-    this.emit("doubleClick", properties);
-  };
 
+      /************************************
+          Week of Year
+      ************************************/
 
-  /**
-   * Handle the onHold selection part
-   *
-   * @param pointer
-   * @private
-   */
-  exports._handleOnHold = function(pointer) {
-    var node = this._getNodeAt(pointer);
-    if (node != null) {
-      this._selectObject(node,true);
-    }
-    else {
-      var edge = this._getEdgeAt(pointer);
-      if (edge != null) {
-        this._selectObject(edge,true);
-      }
-    }
-    this._redraw();
-  };
 
+      // firstDayOfWeek       0 = sun, 6 = sat
+      //                      the day of the week that starts the week
+      //                      (usually sunday or monday)
+      // firstDayOfWeekOfYear 0 = sun, 6 = sat
+      //                      the first week is the week that contains the first
+      //                      of this day of the week
+      //                      (eg. ISO weeks use thursday (4))
+      function weekOfYear(mom, firstDayOfWeek, firstDayOfWeekOfYear) {
+          var end = firstDayOfWeekOfYear - firstDayOfWeek,
+              daysToDayOfWeek = firstDayOfWeekOfYear - mom.day(),
+              adjustedMoment;
 
-  /**
-   * handle the onRelease event. These functions are here for the navigation controls module
-   * and data manipulation module.
-   *
-    * @private
-   */
-  exports._handleOnRelease = function(pointer) {
-    this._manipulationReleaseOverload(pointer);
-    this._navigationReleaseOverload(pointer);
-  };
 
-  exports._manipulationReleaseOverload = function (pointer) {};
-  exports._navigationReleaseOverload = function (pointer) {};
+          if (daysToDayOfWeek > end) {
+              daysToDayOfWeek -= 7;
+          }
 
-  /**
-   *
-   * retrieve the currently selected objects
-   * @return {{nodes: Array.<String>, edges: Array.<String>}} selection
-   */
-  exports.getSelection = function() {
-    var nodeIds = this.getSelectedNodes();
-    var edgeIds = this.getSelectedEdges();
-    return {nodes:nodeIds, edges:edgeIds};
-  };
+          if (daysToDayOfWeek < end - 7) {
+              daysToDayOfWeek += 7;
+          }
 
-  /**
-   *
-   * retrieve the currently selected nodes
-   * @return {String[]} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedNodes = function() {
-    var idArray = [];
-    if (this.constants.selectable == true) {
-      for (var nodeId in this.selectionObj.nodes) {
-        if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-          idArray.push(nodeId);
-        }
+          adjustedMoment = moment(mom).add(daysToDayOfWeek, 'd');
+          return {
+              week: Math.ceil(adjustedMoment.dayOfYear() / 7),
+              year: adjustedMoment.year()
+          };
       }
-    }
-    return idArray
-  };
 
-  /**
-   *
-   * retrieve the currently selected edges
-   * @return {Array} selection    An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.getSelectedEdges = function() {
-    var idArray = [];
-    if (this.constants.selectable == true) {
-      for (var edgeId in this.selectionObj.edges) {
-        if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
-          idArray.push(edgeId);
-        }
+      //http://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday
+      function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) {
+          var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear;
+
+          d = d === 0 ? 7 : d;
+          weekday = weekday != null ? weekday : firstDayOfWeek;
+          daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0);
+          dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1;
+
+          return {
+              year: dayOfYear > 0 ? year : year - 1,
+              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
+          };
       }
-    }
-    return idArray;
-  };
 
+      /************************************
+          Top Level Functions
+      ************************************/
 
-  /**
-   * select zero or more nodes DEPRICATED
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.setSelection = function() {
-    console.log("setSelection is deprecated. Please use selectNodes instead.")
-  };
+      function makeMoment(config) {
+          var input = config._i,
+              format = config._f,
+              res;
 
+          config._locale = config._locale || moment.localeData(config._l);
 
-  /**
-   * select zero or more nodes with the option to highlight edges
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   * @param {boolean} [highlightEdges]
-   */
-  exports.selectNodes = function(selection, highlightEdges) {
-    var i, iMax, id;
+          if (input === null || (format === undefined && input === '')) {
+              return moment.invalid({nullInput: true});
+          }
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+          if (typeof input === 'string') {
+              config._i = input = config._locale.preparse(input);
+          }
 
-    // first unselect any selected node
-    this._unselectAll(true);
+          if (moment.isMoment(input)) {
+              return new Moment(input, true);
+          } else if (format) {
+              if (isArray(format)) {
+                  makeDateFromStringAndArray(config);
+              } else {
+                  makeDateFromStringAndFormat(config);
+              }
+          } else {
+              makeDateFromInput(config);
+          }
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+          res = new Moment(config);
+          if (res._nextDay) {
+              // Adding is smart enough around DST
+              res.add(1, 'd');
+              res._nextDay = undefined;
+          }
 
-      var node = this.nodes[id];
-      if (!node) {
-        throw new RangeError('Node with id "' + id + '" not found');
+          return res;
       }
-      this._selectObject(node,true,true,highlightEdges,true);
-    }
-    this.redraw();
-  };
 
+      moment = function (input, format, locale, strict) {
+          var c;
 
-  /**
-   * select zero or more edges
-   * @param {Number[] | String[]} selection     An array with the ids of the
-   *                                            selected nodes.
-   */
-  exports.selectEdges = function(selection) {
-    var i, iMax, id;
+          if (typeof(locale) === 'boolean') {
+              strict = locale;
+              locale = undefined;
+          }
+          // object construction must be done this way.
+          // https://github.com/moment/moment/issues/1423
+          c = {};
+          c._isAMomentObject = true;
+          c._i = input;
+          c._f = format;
+          c._l = locale;
+          c._strict = strict;
+          c._isUTC = false;
+          c._pf = defaultParsingFlags();
 
-    if (!selection || (selection.length == undefined))
-      throw 'Selection must be an array with ids';
+          return makeMoment(c);
+      };
 
-    // first unselect any selected node
-    this._unselectAll(true);
+      moment.suppressDeprecationWarnings = false;
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-      id = selection[i];
+      moment.createFromInputFallback = deprecate(
+          'moment construction falls back to js Date. This is ' +
+          'discouraged and will be removed in upcoming major ' +
+          'release. Please refer to ' +
+          'https://github.com/moment/moment/issues/1407 for more info.',
+          function (config) {
+              config._d = new Date(config._i + (config._useUTC ? ' UTC' : ''));
+          }
+      );
 
-      var edge = this.edges[id];
-      if (!edge) {
-        throw new RangeError('Edge with id "' + id + '" not found');
+      // Pick a moment m from moments so that m[fn](other) is true for all
+      // other. This relies on the function fn to be transitive.
+      //
+      // moments should either be an array of moment objects or an array, whose
+      // first element is an array of moment objects.
+      function pickBy(fn, moments) {
+          var res, i;
+          if (moments.length === 1 && isArray(moments[0])) {
+              moments = moments[0];
+          }
+          if (!moments.length) {
+              return moment();
+          }
+          res = moments[0];
+          for (i = 1; i < moments.length; ++i) {
+              if (moments[i][fn](res)) {
+                  res = moments[i];
+              }
+          }
+          return res;
       }
-      this._selectObject(edge,true,true,false,true);
-    }
-    this.redraw();
-  };
 
-  /**
-   * Validate the selection: remove ids of nodes which no longer exist
-   * @private
-   */
-  exports._updateSelection = function () {
-    for(var nodeId in this.selectionObj.nodes) {
-      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
-        if (!this.nodes.hasOwnProperty(nodeId)) {
-          delete this.selectionObj.nodes[nodeId];
-        }
-      }
-    }
-    for(var edgeId in this.selectionObj.edges) {
-      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
-        if (!this.edges.hasOwnProperty(edgeId)) {
-          delete this.selectionObj.edges[edgeId];
-        }
-      }
-    }
-  };
+      moment.min = function () {
+          var args = [].slice.call(arguments, 0);
 
+          return pickBy('isBefore', args);
+      };
 
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
+      moment.max = function () {
+          var args = [].slice.call(arguments, 0);
 
-  var util = __webpack_require__(1);
-  var Node = __webpack_require__(40);
-  var Edge = __webpack_require__(37);
+          return pickBy('isAfter', args);
+      };
 
-  /**
-   * clears the toolbar div element of children
-   *
-   * @private
-   */
-  exports._clearManipulatorBar = function() {
-    this._recursiveDOMDelete(this.manipulationDiv);
-    this.manipulationDOM = {};
+      // creating with utc
+      moment.utc = function (input, format, locale, strict) {
+          var c;
 
-    this._manipulationReleaseOverload = function () {};
-    delete this.sectors['support']['nodes']['targetNode'];
-    delete this.sectors['support']['nodes']['targetViaNode'];
-    this.controlNodesActive = false;
-    this.freezeSimulation = false;
-  };
+          if (typeof(locale) === 'boolean') {
+              strict = locale;
+              locale = undefined;
+          }
+          // object construction must be done this way.
+          // https://github.com/moment/moment/issues/1423
+          c = {};
+          c._isAMomentObject = true;
+          c._useUTC = true;
+          c._isUTC = true;
+          c._l = locale;
+          c._i = input;
+          c._f = format;
+          c._strict = strict;
+          c._pf = defaultParsingFlags();
 
-  /**
-   * Manipulation UI temporarily overloads certain functions to extend or replace them. To be able to restore
-   * these functions to their original functionality, we saved them in this.cachedFunctions.
-   * This function restores these functions to their original function.
-   *
-   * @private
-   */
-  exports._restoreOverloadedFunctions = function() {
-    for (var functionName in this.cachedFunctions) {
-      if (this.cachedFunctions.hasOwnProperty(functionName)) {
-        this[functionName] = this.cachedFunctions[functionName];
-        delete this.cachedFunctions[functionName];
-      }
-    }
-  };
+          return makeMoment(c).utc();
+      };
 
-  /**
-   * Enable or disable edit-mode.
-   *
-   * @private
-   */
-  exports._toggleEditMode = function() {
-    this.editMode = !this.editMode;
-    var toolbar = this.manipulationDiv;
-    var closeDiv = this.closeDiv;
-    var editModeDiv = this.editModeDiv;
-    if (this.editMode == true) {
-      toolbar.style.display="block";
-      closeDiv.style.display="block";
-      editModeDiv.style.display="none";
-      closeDiv.onclick = this._toggleEditMode.bind(this);
-    }
-    else {
-      toolbar.style.display="none";
-      closeDiv.style.display="none";
-      editModeDiv.style.display="block";
-      closeDiv.onclick = null;
-    }
-    this._createManipulatorBar()
-  };
+      // creating with unix timestamp (in seconds)
+      moment.unix = function (input) {
+          return moment(input * 1000);
+      };
 
-  /**
-   * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
-   *
-   * @private
-   */
-  exports._createManipulatorBar = function() {
-    // remove bound functions
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+      // duration
+      moment.duration = function (input, key) {
+          var duration = input,
+              // matching against regexp is expensive, do it on demand
+              match = null,
+              sign,
+              ret,
+              parseIso,
+              diffRes;
 
-    var locale = this.constants.locales[this.constants.locale];
+          if (moment.isDuration(input)) {
+              duration = {
+                  ms: input._milliseconds,
+                  d: input._days,
+                  M: input._months
+              };
+          } else if (typeof input === 'number') {
+              duration = {};
+              if (key) {
+                  duration[key] = input;
+              } else {
+                  duration.milliseconds = input;
+              }
+          } else if (!!(match = aspNetTimeSpanJsonRegex.exec(input))) {
+              sign = (match[1] === '-') ? -1 : 1;
+              duration = {
+                  y: 0,
+                  d: toInt(match[DATE]) * sign,
+                  h: toInt(match[HOUR]) * sign,
+                  m: toInt(match[MINUTE]) * sign,
+                  s: toInt(match[SECOND]) * sign,
+                  ms: toInt(match[MILLISECOND]) * sign
+              };
+          } else if (!!(match = isoDurationRegex.exec(input))) {
+              sign = (match[1] === '-') ? -1 : 1;
+              parseIso = function (inp) {
+                  // We'd normally use ~~inp for this, but unfortunately it also
+                  // converts floats to ints.
+                  // inp may be undefined, so careful calling replace on it.
+                  var res = inp && parseFloat(inp.replace(',', '.'));
+                  // apply sign while we're at it
+                  return (isNaN(res) ? 0 : res) * sign;
+              };
+              duration = {
+                  y: parseIso(match[2]),
+                  M: parseIso(match[3]),
+                  d: parseIso(match[4]),
+                  h: parseIso(match[5]),
+                  m: parseIso(match[6]),
+                  s: parseIso(match[7]),
+                  w: parseIso(match[8])
+              };
+          } else if (duration == null) {// checks for null or undefined
+              duration = {};
+          } else if (typeof duration === 'object' &&
+                  ('from' in duration || 'to' in duration)) {
+              diffRes = momentsDifference(moment(duration.from), moment(duration.to));
 
-    if (this.edgeBeingEdited !== undefined) {
-      this.edgeBeingEdited._disableControlNodes();
-      this.edgeBeingEdited = undefined;
-      this.selectedControlNode = null;
-      this.controlNodesActive = false;
-      this._redraw();
-    }
+              duration = {};
+              duration.ms = diffRes.milliseconds;
+              duration.M = diffRes.months;
+          }
 
-    // restore overloaded functions
-    this._restoreOverloadedFunctions();
+          ret = new Duration(duration);
 
-    // resume calculation
-    this.freezeSimulation = false;
+          if (moment.isDuration(input) && hasOwnProp(input, '_locale')) {
+              ret._locale = input._locale;
+          }
 
-    // reset global variables
-    this.blockConnectingEdgeSelection = false;
-    this.forceAppendSelection = false;
-    this.manipulationDOM = {};
+          return ret;
+      };
 
-    if (this.editMode == true) {
-      while (this.manipulationDiv.hasChildNodes()) {
-        this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
-      }
+      // version number
+      moment.version = VERSION;
 
-      this.manipulationDOM['addNodeSpan'] = document.createElement('span');
-      this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
-      this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
-      this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
-      this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
-      this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
+      // default format
+      moment.defaultFormat = isoFormat;
 
-      this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
-      this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+      // constant that refers to the ISO standard
+      moment.ISO_8601 = function () {};
 
-      this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
-      this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
-      this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
-      this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
-      this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
-      this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
+      // Plugins that add properties should also add the key here (null value),
+      // so we can properly clone ourselves.
+      moment.momentProperties = momentProperties;
 
-      this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
-      this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
-      this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
+      // This function will be called whenever a moment is mutated.
+      // It is intended to keep the offset in sync with the timezone.
+      moment.updateOffset = function () {};
 
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
-        this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
+      // This function allows you to set a threshold for relative time strings
+      moment.relativeTimeThreshold = function (threshold, limit) {
+          if (relativeTimeThresholds[threshold] === undefined) {
+              return false;
+          }
+          if (limit === undefined) {
+              return relativeTimeThresholds[threshold];
+          }
+          relativeTimeThresholds[threshold] = limit;
+          return true;
+      };
 
-        this.manipulationDOM['editNodeSpan'] = document.createElement('span');
-        this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
-        this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
-        this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
-        this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
-        this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
+      moment.lang = deprecate(
+          'moment.lang is deprecated. Use moment.locale instead.',
+          function (key, value) {
+              return moment.locale(key, value);
+          }
+      );
 
-        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
-        this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
-        this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
+      // This function will load locale and then set the global locale.  If
+      // no arguments are passed in, it will simply return the current global
+      // locale key.
+      moment.locale = function (key, values) {
+          var data;
+          if (key) {
+              if (typeof(values) !== 'undefined') {
+                  data = moment.defineLocale(key, values);
+              }
+              else {
+                  data = moment.localeData(key);
+              }
 
-        this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
-        this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
-        this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
-        this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
-        this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
-        this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
+              if (data) {
+                  moment.duration._locale = moment._locale = data;
+              }
+          }
 
-        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
-        this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
-        this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
+          return moment._locale._abbr;
+      };
 
-        this.manipulationDOM['deleteSpan'] = document.createElement('span');
-        this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
-        this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
-        this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
-        this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
-        this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
+      moment.defineLocale = function (name, values) {
+          if (values !== null) {
+              values.abbr = name;
+              if (!locales[name]) {
+                  locales[name] = new Locale();
+              }
+              locales[name].set(values);
 
-        this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
-        this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
-      }
+              // backwards compat for now: also set the locale
+              moment.locale(name);
 
+              return locales[name];
+          } else {
+              // useful for testing
+              delete locales[name];
+              return null;
+          }
+      };
 
-      // bind the icons
-      this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
-      this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
-      if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
-        this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
-      }
-      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
-        this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
-      }
-      if (this._selectionIsEmpty() == false) {
-        this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
-      }
-      this.closeDiv.onclick = this._toggleEditMode.bind(this);
+      moment.langData = deprecate(
+          'moment.langData is deprecated. Use moment.localeData instead.',
+          function (key) {
+              return moment.localeData(key);
+          }
+      );
 
-      var me = this;
-      this.boundFunction = me._createManipulatorBar;
-      this.on('select', this.boundFunction);
-    }
-    else {
-      while (this.editModeDiv.hasChildNodes()) {
-        this.editModeDiv.removeChild(this.editModeDiv.firstChild);
-      }
+      // returns locale data
+      moment.localeData = function (key) {
+          var locale;
 
-      this.manipulationDOM['editModeSpan'] = document.createElement('span');
-      this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
-      this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
-      this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
-      this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
-      this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
+          if (key && key._locale && key._locale._abbr) {
+              key = key._locale._abbr;
+          }
 
-      this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
+          if (!key) {
+              return moment._locale;
+          }
 
-      this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
-    }
-  };
+          if (!isArray(key)) {
+              //short-circuit everything else
+              locale = loadLocale(key);
+              if (locale) {
+                  return locale;
+              }
+              key = [key];
+          }
 
+          return chooseLocale(key);
+      };
 
+      // compare moment object
+      moment.isMoment = function (obj) {
+          return obj instanceof Moment ||
+              (obj != null && hasOwnProp(obj, '_isAMomentObject'));
+      };
 
-  /**
-   * Create the toolbar for adding Nodes
-   *
-   * @private
-   */
-  exports._createAddNodeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+      // for typechecking Duration objects
+      moment.isDuration = function (obj) {
+          return obj instanceof Duration;
+      };
 
-    var locale = this.constants.locales[this.constants.locale];
+      for (i = lists.length - 1; i >= 0; --i) {
+          makeList(lists[i]);
+      }
 
-    this.manipulationDOM = {};
-    this.manipulationDOM['backSpan'] = document.createElement('span');
-    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
-    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
-    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
-    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
-    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+      moment.normalizeUnits = function (units) {
+          return normalizeUnits(units);
+      };
 
-    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
-    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+      moment.invalid = function (flags) {
+          var m = moment.utc(NaN);
+          if (flags != null) {
+              extend(m._pf, flags);
+          }
+          else {
+              m._pf.userInvalidated = true;
+          }
 
-    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
-    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
-    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
-    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
-    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
-    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+          return m;
+      };
 
-    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
-    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
-    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
+      moment.parseZone = function () {
+          return moment.apply(null, arguments).parseZone();
+      };
 
-    // bind the icon
-    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
+      moment.parseTwoDigitYear = function (input) {
+          return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+      };
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    var me = this;
-    this.boundFunction = me._addNode;
-    this.on('select', this.boundFunction);
-  };
+      moment.isDate = isDate;
 
+      /************************************
+          Moment Prototype
+      ************************************/
 
-  /**
-   * create the toolbar to connect nodes
-   *
-   * @private
-   */
-  exports._createAddEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this._unselectAll(true);
-    this.freezeSimulation = true;
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+      extend(moment.fn = Moment.prototype, {
 
-    var locale = this.constants.locales[this.constants.locale];
+          clone : function () {
+              return moment(this);
+          },
 
-    this._unselectAll();
-    this.forceAppendSelection = false;
-    this.blockConnectingEdgeSelection = true;
+          valueOf : function () {
+              return +this._d - ((this._offset || 0) * 60000);
+          },
 
-    this.manipulationDOM = {};
-    this.manipulationDOM['backSpan'] = document.createElement('span');
-    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
-    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
-    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
-    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
-    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+          unix : function () {
+              return Math.floor(+this / 1000);
+          },
 
-    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
-    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+          toString : function () {
+              return this.clone().locale('en').format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ');
+          },
 
-    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
-    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
-    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
-    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
-    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
-    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+          toDate : function () {
+              return this._offset ? new Date(+this) : this._d;
+          },
 
-    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
-    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
-    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
+          toISOString : function () {
+              var m = moment(this).utc();
+              if (0 < m.year() && m.year() <= 9999) {
+                  if ('function' === typeof Date.prototype.toISOString) {
+                      // native implementation is ~50x faster, use it when we can
+                      return this.toDate().toISOString();
+                  } else {
+                      return formatMoment(m, 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
+                  }
+              } else {
+                  return formatMoment(m, 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
+              }
+          },
 
-    // bind the icon
-    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
+          toArray : function () {
+              var m = this;
+              return [
+                  m.year(),
+                  m.month(),
+                  m.date(),
+                  m.hours(),
+                  m.minutes(),
+                  m.seconds(),
+                  m.milliseconds()
+              ];
+          },
 
-    // we use the boundFunction so we can reference it when we unbind it from the "select" event.
-    var me = this;
-    this.boundFunction = me._handleConnect;
-    this.on('select', this.boundFunction);
+          isValid : function () {
+              return isValid(this);
+          },
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"] = this._handleTouch;
-    this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
-    this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
-    this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
-    this.cachedFunctions["_handleOnHold"] = this._handleOnHold;
-    this._handleTouch = this._handleConnect;
-    this._manipulationReleaseOverload = function () {};
-    this._handleOnHold    = function () {};
-    this._handleDragStart = function () {};
-    this._handleDragEnd   = this._finishConnect;
+          isDSTShifted : function () {
+              if (this._a) {
+                  return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
+              }
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+              return false;
+          },
 
-  /**
-   * create the toolbar to edit edges
-   *
-   * @private
-   */
-  exports._createEditEdgeToolbar = function() {
-    // clear the toolbar
-    this._clearManipulatorBar();
-    this.controlNodesActive = true;
+          parsingFlags : function () {
+              return extend({}, this._pf);
+          },
 
-    if (this.boundFunction) {
-      this.off('select', this.boundFunction);
-    }
+          invalidAt: function () {
+              return this._pf.overflow;
+          },
 
-    this.edgeBeingEdited = this._getSelectedEdge();
-    this.edgeBeingEdited._enableControlNodes();
+          utc : function (keepLocalTime) {
+              return this.utcOffset(0, keepLocalTime);
+          },
 
-    var locale = this.constants.locales[this.constants.locale];
+          local : function (keepLocalTime) {
+              if (this._isUTC) {
+                  this.utcOffset(0, keepLocalTime);
+                  this._isUTC = false;
 
-    this.manipulationDOM = {};
-    this.manipulationDOM['backSpan'] = document.createElement('span');
-    this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
-    this.manipulationDOM['backLabelSpan'] = document.createElement('span');
-    this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
-    this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
-    this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
+                  if (keepLocalTime) {
+                      this.subtract(this._dateUtcOffset(), 'm');
+                  }
+              }
+              return this;
+          },
 
-    this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
-    this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
+          format : function (inputString) {
+              var output = formatMoment(this, inputString || moment.defaultFormat);
+              return this.localeData().postformat(output);
+          },
 
-    this.manipulationDOM['descriptionSpan'] = document.createElement('span');
-    this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
-    this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
-    this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
-    this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
-    this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
+          add : createAdder(1, 'add'),
 
-    this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
-    this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
-    this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
+          subtract : createAdder(-1, 'subtract'),
 
-    // bind the icon
-    this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
+          diff : function (input, units, asFloat) {
+              var that = makeAs(input, this),
+                  zoneDiff = (that.utcOffset() - this.utcOffset()) * 6e4,
+                  anchor, diff, output, daysAdjust;
 
-    // temporarily overload functions
-    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
-    this.cachedFunctions["_manipulationReleaseOverload"]  = this._manipulationReleaseOverload;
-    this.cachedFunctions["_handleTap"]        = this._handleTap;
-    this.cachedFunctions["_handleDragStart"]  = this._handleDragStart;
-    this.cachedFunctions["_handleOnDrag"]     = this._handleOnDrag;
-    this._handleTouch     = this._selectControlNode;
-    this._handleTap       = function () {};
-    this._handleOnDrag    = this._controlNodeDrag;
-    this._handleDragStart = function () {}
-    this._manipulationReleaseOverload = this._releaseControlNode;
+              units = normalizeUnits(units);
 
-    // redraw to show the unselect
-    this._redraw();
-  };
+              if (units === 'year' || units === 'month' || units === 'quarter') {
+                  output = monthDiff(this, that);
+                  if (units === 'quarter') {
+                      output = output / 3;
+                  } else if (units === 'year') {
+                      output = output / 12;
+                  }
+              } else {
+                  diff = this - that;
+                  output = units === 'second' ? diff / 1e3 : // 1000
+                      units === 'minute' ? diff / 6e4 : // 1000 * 60
+                      units === 'hour' ? diff / 36e5 : // 1000 * 60 * 60
+                      units === 'day' ? (diff - zoneDiff) / 864e5 : // 1000 * 60 * 60 * 24, negate dst
+                      units === 'week' ? (diff - zoneDiff) / 6048e5 : // 1000 * 60 * 60 * 24 * 7, negate dst
+                      diff;
+              }
+              return asFloat ? output : absRound(output);
+          },
 
+          from : function (time, withoutSuffix) {
+              return moment.duration({to: this, from: time}).locale(this.locale()).humanize(!withoutSuffix);
+          },
 
-  /**
-   * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
-   * to walk the user through the process.
-   *
-   * @private
-   */
-  exports._selectControlNode = function(pointer) {
-    this.edgeBeingEdited.controlNodes.from.unselect();
-    this.edgeBeingEdited.controlNodes.to.unselect();
-    this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
-    if (this.selectedControlNode !== null) {
-      this.selectedControlNode.select();
-      this.freezeSimulation = true;
-    }
-    this._redraw();
-  };
+          fromNow : function (withoutSuffix) {
+              return this.from(moment(), withoutSuffix);
+          },
 
+          calendar : function (time) {
+              // We want to compare the start of today, vs this.
+              // Getting start-of-today depends on whether we're locat/utc/offset
+              // or not.
+              var now = time || moment(),
+                  sod = makeAs(now, this).startOf('day'),
+                  diff = this.diff(sod, 'days', true),
+                  format = diff < -6 ? 'sameElse' :
+                      diff < -1 ? 'lastWeek' :
+                      diff < 0 ? 'lastDay' :
+                      diff < 1 ? 'sameDay' :
+                      diff < 2 ? 'nextDay' :
+                      diff < 7 ? 'nextWeek' : 'sameElse';
+              return this.format(this.localeData().calendar(format, this, moment(now)));
+          },
 
-  /**
-   * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
-   * to walk the user through the process.
-   *
-   * @private
-   */
-  exports._controlNodeDrag = function(event) {
-    var pointer = this._getPointer(event.gesture.center);
-    if (this.selectedControlNode !== null && this.selectedControlNode !== undefined) {
-      this.selectedControlNode.x = this._XconvertDOMtoCanvas(pointer.x);
-      this.selectedControlNode.y = this._YconvertDOMtoCanvas(pointer.y);
-    }
-    this._redraw();
-  };
+          isLeapYear : function () {
+              return isLeapYear(this.year());
+          },
 
+          isDST : function () {
+              return (this.utcOffset() > this.clone().month(0).utcOffset() ||
+                  this.utcOffset() > this.clone().month(5).utcOffset());
+          },
 
-  /**
-   *
-   * @param pointer
-   * @private
-   */
-  exports._releaseControlNode = function(pointer) {
-    var newNode = this._getNodeAt(pointer);
-    if (newNode !== null) {
-      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
-        this.edgeBeingEdited._restoreControlNodes();
-        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
-        this.edgeBeingEdited.controlNodes.from.unselect();
-      }
-      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
-        this.edgeBeingEdited._restoreControlNodes();
-        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
-        this.edgeBeingEdited.controlNodes.to.unselect();
-      }
-    }
-    else {
-      this.edgeBeingEdited._restoreControlNodes();
-    }
-    this.freezeSimulation = false;
-    this._redraw();
-  };
+          day : function (input) {
+              var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
+              if (input != null) {
+                  input = parseWeekday(input, this.localeData());
+                  return this.add(input - day, 'd');
+              } else {
+                  return day;
+              }
+          },
 
-  /**
-   * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
-   * to walk the user through the process.
-   *
-   * @private
-   */
-  exports._handleConnect = function(pointer) {
-    if (this._getSelectedNodeCount() == 0) {
-      var node = this._getNodeAt(pointer);
+          month : makeAccessor('Month', true),
 
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert(this.constants.locales[this.constants.locale]['createEdgeError'])
-        }
-        else {
-          this._selectObject(node,false);
-          var supportNodes = this.sectors['support']['nodes'];
+          startOf : function (units) {
+              units = normalizeUnits(units);
+              // the following switch intentionally omits break keywords
+              // to utilize falling through the cases.
+              switch (units) {
+              case 'year':
+                  this.month(0);
+                  /* falls through */
+              case 'quarter':
+              case 'month':
+                  this.date(1);
+                  /* falls through */
+              case 'week':
+              case 'isoWeek':
+              case 'day':
+                  this.hours(0);
+                  /* falls through */
+              case 'hour':
+                  this.minutes(0);
+                  /* falls through */
+              case 'minute':
+                  this.seconds(0);
+                  /* falls through */
+              case 'second':
+                  this.milliseconds(0);
+                  /* falls through */
+              }
 
-          // create a node the temporary line can look at
-          supportNodes['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
-          var targetNode = supportNodes['targetNode'];
-          targetNode.x = node.x;
-          targetNode.y = node.y;
+              // weeks are a special case
+              if (units === 'week') {
+                  this.weekday(0);
+              } else if (units === 'isoWeek') {
+                  this.isoWeekday(1);
+              }
 
-          // create a temporary edge
-          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
-          var connectionEdge = this.edges['connectionEdge'];
-          connectionEdge.from = node;
-          connectionEdge.connected = true;
-          connectionEdge.options.smoothCurves = {enabled: true,
-              dynamic: false,
-              type: "continuous",
-              roundness: 0.5
-          };
-          connectionEdge.selected = true;
-          connectionEdge.to = targetNode;
+              // quarters are also special
+              if (units === 'quarter') {
+                  this.month(Math.floor(this.month() / 3) * 3);
+              }
 
-          this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
-          this._handleOnDrag = function(event) {
-            var pointer = this._getPointer(event.gesture.center);
-            var connectionEdge = this.edges['connectionEdge'];
-            connectionEdge.to.x = this._XconvertDOMtoCanvas(pointer.x);
-            connectionEdge.to.y = this._YconvertDOMtoCanvas(pointer.y);
-          };
+              return this;
+          },
 
-          this.moving = true;
-          this.start();
-        }
-      }
-    }
-  };
+          endOf: function (units) {
+              units = normalizeUnits(units);
+              if (units === undefined || units === 'millisecond') {
+                  return this;
+              }
+              return this.startOf(units).add(1, (units === 'isoWeek' ? 'week' : units)).subtract(1, 'ms');
+          },
 
-  exports._finishConnect = function(event) {
-    if (this._getSelectedNodeCount() == 1) {
-      var pointer = this._getPointer(event.gesture.center);
-      // restore the drag function
-      this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
-      delete this.cachedFunctions["_handleOnDrag"];
+          isAfter: function (input, units) {
+              var inputMs;
+              units = normalizeUnits(typeof units !== 'undefined' ? units : 'millisecond');
+              if (units === 'millisecond') {
+                  input = moment.isMoment(input) ? input : moment(input);
+                  return +this > +input;
+              } else {
+                  inputMs = moment.isMoment(input) ? +input : +moment(input);
+                  return inputMs < +this.clone().startOf(units);
+              }
+          },
 
-      // remember the edge id
-      var connectFromId = this.edges['connectionEdge'].fromId;
+          isBefore: function (input, units) {
+              var inputMs;
+              units = normalizeUnits(typeof units !== 'undefined' ? units : 'millisecond');
+              if (units === 'millisecond') {
+                  input = moment.isMoment(input) ? input : moment(input);
+                  return +this < +input;
+              } else {
+                  inputMs = moment.isMoment(input) ? +input : +moment(input);
+                  return +this.clone().endOf(units) < inputMs;
+              }
+          },
 
-      // remove the temporary nodes and edge
-      delete this.edges['connectionEdge'];
-      delete this.sectors['support']['nodes']['targetNode'];
-      delete this.sectors['support']['nodes']['targetViaNode'];
+          isBetween: function (from, to, units) {
+              return this.isAfter(from, units) && this.isBefore(to, units);
+          },
 
-      var node = this._getNodeAt(pointer);
-      if (node != null) {
-        if (node.clusterSize > 1) {
-          alert(this.constants.locales[this.constants.locale]["createEdgeError"])
-        }
-        else {
-          this._createEdge(connectFromId,node.id);
-          this._createManipulatorBar();
-        }
-      }
-      this._unselectAll();
-    }
-  };
+          isSame: function (input, units) {
+              var inputMs;
+              units = normalizeUnits(units || 'millisecond');
+              if (units === 'millisecond') {
+                  input = moment.isMoment(input) ? input : moment(input);
+                  return +this === +input;
+              } else {
+                  inputMs = +moment(input);
+                  return +(this.clone().startOf(units)) <= inputMs && inputMs <= +(this.clone().endOf(units));
+              }
+          },
 
+          min: deprecate(
+                   'moment().min is deprecated, use moment.min instead. https://github.com/moment/moment/issues/1548',
+                   function (other) {
+                       other = moment.apply(null, arguments);
+                       return other < this ? this : other;
+                   }
+           ),
 
-  /**
-   * Adds a node on the specified location
-   */
-  exports._addNode = function() {
-    if (this._selectionIsEmpty() && this.editMode == true) {
-      var positionObject = this._pointerToPositionObject(this.pointerPosition);
-      var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMoveX:true,allowedToMoveY:true};
-      if (this.triggerFunctions.add) {
-        if (this.triggerFunctions.add.length == 2) {
-          var me = this;
-          this.triggerFunctions.add(defaultData, function(finalizedData) {
-            me.nodesData.add(finalizedData);
-            me._createManipulatorBar();
-            me.moving = true;
-            me.start();
-          });
-        }
-        else {
-          throw new Error('The function for add does not support two arguments (data,callback)');
-          this._createManipulatorBar();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.nodesData.add(defaultData);
-        this._createManipulatorBar();
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+          max: deprecate(
+                  'moment().max is deprecated, use moment.max instead. https://github.com/moment/moment/issues/1548',
+                  function (other) {
+                      other = moment.apply(null, arguments);
+                      return other > this ? this : other;
+                  }
+          ),
 
+          zone : deprecate(
+                  'moment().zone is deprecated, use moment().utcOffset instead. ' +
+                  'https://github.com/moment/moment/issues/1779',
+                  function (input, keepLocalTime) {
+                      if (input != null) {
+                          if (typeof input !== 'string') {
+                              input = -input;
+                          }
 
-  /**
-   * connect two nodes with a new edge.
-   *
-   * @private
-   */
-  exports._createEdge = function(sourceNodeId,targetNodeId) {
-    if (this.editMode == true) {
-      var defaultData = {from:sourceNodeId, to:targetNodeId};
-      if (this.triggerFunctions.connect) {
-        if (this.triggerFunctions.connect.length == 2) {
-          var me = this;
-          this.triggerFunctions.connect(defaultData, function(finalizedData) {
-            me.edgesData.add(finalizedData);
-            me.moving = true;
-            me.start();
-          });
-        }
-        else {
-          throw new Error('The function for connect does not support two arguments (data,callback)');
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.add(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+                          this.utcOffset(input, keepLocalTime);
 
-  /**
-   * connect two nodes with a new edge.
-   *
-   * @private
-   */
-  exports._editEdge = function(sourceNodeId,targetNodeId) {
-    if (this.editMode == true) {
-      var defaultData = {id: this.edgeBeingEdited.id, from:sourceNodeId, to:targetNodeId};
-      if (this.triggerFunctions.editEdge) {
-        if (this.triggerFunctions.editEdge.length == 2) {
-          var me = this;
-          this.triggerFunctions.editEdge(defaultData, function(finalizedData) {
-            me.edgesData.update(finalizedData);
-            me.moving = true;
-            me.start();
-          });
-        }
-        else {
-          throw new Error('The function for edit does not support two arguments (data, callback)');
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        this.edgesData.update(defaultData);
-        this.moving = true;
-        this.start();
-      }
-    }
-  };
+                          return this;
+                      } else {
+                          return -this.utcOffset();
+                      }
+                  }
+          ),
 
-  /**
-   * Create the toolbar to edit the selected node. The label and the color can be changed. Other colors are derived from the chosen color.
-   *
-   * @private
-   */
-  exports._editNode = function() {
-    if (this.triggerFunctions.edit && this.editMode == true) {
-      var node = this._getSelectedNode();
-      var data = {id:node.id,
-        label: node.label,
-        group: node.options.group,
-        shape: node.options.shape,
-        color: {
-          background:node.options.color.background,
-          border:node.options.color.border,
-          highlight: {
-            background:node.options.color.highlight.background,
-            border:node.options.color.highlight.border
-          }
-        }};
-      if (this.triggerFunctions.edit.length == 2) {
-        var me = this;
-        this.triggerFunctions.edit(data, function (finalizedData) {
-          me.nodesData.update(finalizedData);
-          me._createManipulatorBar();
-          me.moving = true;
-          me.start();
-        });
-      }
-      else {
-        throw new Error('The function for edit does not support two arguments (data, callback)');
-      }
-    }
-    else {
-      throw new Error('No edit function has been bound to this button');
-    }
-  };
+          // keepLocalTime = true means only change the timezone, without
+          // affecting the local hour. So 5:31:26 +0300 --[utcOffset(2, true)]-->
+          // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist with offset
+          // +0200, so we adjust the time as needed, to be valid.
+          //
+          // Keeping the time actually adds/subtracts (one hour)
+          // from the actual represented time. That is why we call updateOffset
+          // a second time. In case it wants us to change the offset again
+          // _changeInProgress == true case, then we have to adjust, because
+          // there is no such time in the given timezone.
+          utcOffset : function (input, keepLocalTime) {
+              var offset = this._offset || 0,
+                  localAdjust;
+              if (input != null) {
+                  if (typeof input === 'string') {
+                      input = utcOffsetFromString(input);
+                  }
+                  if (Math.abs(input) < 16) {
+                      input = input * 60;
+                  }
+                  if (!this._isUTC && keepLocalTime) {
+                      localAdjust = this._dateUtcOffset();
+                  }
+                  this._offset = input;
+                  this._isUTC = true;
+                  if (localAdjust != null) {
+                      this.add(localAdjust, 'm');
+                  }
+                  if (offset !== input) {
+                      if (!keepLocalTime || this._changeInProgress) {
+                          addOrSubtractDurationFromMoment(this,
+                                  moment.duration(input - offset, 'm'), 1, false);
+                      } else if (!this._changeInProgress) {
+                          this._changeInProgress = true;
+                          moment.updateOffset(this, true);
+                          this._changeInProgress = null;
+                      }
+                  }
 
+                  return this;
+              } else {
+                  return this._isUTC ? offset : this._dateUtcOffset();
+              }
+          },
 
+          isLocal : function () {
+              return !this._isUTC;
+          },
 
+          isUtcOffset : function () {
+              return this._isUTC;
+          },
 
-  /**
-   * delete everything in the selection
-   *
-   * @private
-   */
-  exports._deleteSelected = function() {
-    if (!this._selectionIsEmpty() && this.editMode == true) {
-      if (!this._clusterInSelection()) {
-        var selectedNodes = this.getSelectedNodes();
-        var selectedEdges = this.getSelectedEdges();
-        if (this.triggerFunctions.del) {
-          var me = this;
-          var data = {nodes: selectedNodes, edges: selectedEdges};
-          if (this.triggerFunctions.del.length == 2) {
-            this.triggerFunctions.del(data, function (finalizedData) {
-              me.edgesData.remove(finalizedData.edges);
-              me.nodesData.remove(finalizedData.nodes);
-              me._unselectAll();
-              me.moving = true;
-              me.start();
-            });
-          }
-          else {
-            throw new Error('The function for delete does not support two arguments (data, callback)')
-          }
-        }
-        else {
-          this.edgesData.remove(selectedEdges);
-          this.nodesData.remove(selectedNodes);
-          this._unselectAll();
-          this.moving = true;
-          this.start();
-        }
-      }
-      else {
-        alert(this.constants.locales[this.constants.locale]["deleteClusterError"]);
-      }
-    }
-  };
+          isUtc : function () {
+              return this._isUTC && this._offset === 0;
+          },
 
+          zoneAbbr : function () {
+              return this._isUTC ? 'UTC' : '';
+          },
 
-/***/ },
-/* 65 */
-/***/ function(module, exports, __webpack_require__) {
+          zoneName : function () {
+              return this._isUTC ? 'Coordinated Universal Time' : '';
+          },
 
-  var util = __webpack_require__(1);
-  var Hammer = __webpack_require__(45);
+          parseZone : function () {
+              if (this._tzm) {
+                  this.utcOffset(this._tzm);
+              } else if (typeof this._i === 'string') {
+                  this.utcOffset(utcOffsetFromString(this._i));
+              }
+              return this;
+          },
 
-  exports._cleanNavigation = function() {
-    // clean hammer bindings
-    if (this.navigationHammers.existing.length != 0) {
-      for (var i = 0; i < this.navigationHammers.existing.length; i++) {
-        this.navigationHammers.existing[i].dispose();
-      }
-      this.navigationHammers.existing = [];
-    }
+          hasAlignedHourOffset : function (input) {
+              if (!input) {
+                  input = 0;
+              }
+              else {
+                  input = moment(input).utcOffset();
+              }
 
-    this._navigationReleaseOverload = function () {};
+              return (this.utcOffset() - input) % 60 === 0;
+          },
 
-    // clean up previous navigation items
-    if (this.navigationDivs && this.navigationDivs['wrapper'] && this.navigationDivs['wrapper'].parentNode) {
-      this.navigationDivs['wrapper'].parentNode.removeChild(this.navigationDivs['wrapper']);
-    }
-  };
+          daysInMonth : function () {
+              return daysInMonth(this.year(), this.month());
+          },
 
-  /**
-   * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
-   * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
-   * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
-   * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
-   *
-   * @private
-   */
-  exports._loadNavigationElements = function() {
-    this._cleanNavigation();
+          dayOfYear : function (input) {
+              var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
+              return input == null ? dayOfYear : this.add((input - dayOfYear), 'd');
+          },
 
-    this.navigationDivs = {};
-    var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
-    var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
+          quarter : function (input) {
+              return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
+          },
 
-    this.navigationDivs['wrapper'] = document.createElement('div');
-    this.frame.appendChild(this.navigationDivs['wrapper']);
+          weekYear : function (input) {
+              var year = weekOfYear(this, this.localeData()._week.dow, this.localeData()._week.doy).year;
+              return input == null ? year : this.add((input - year), 'y');
+          },
 
-    for (var i = 0; i < navigationDivs.length; i++) {
-      this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-      this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
-      this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
+          isoWeekYear : function (input) {
+              var year = weekOfYear(this, 1, 4).year;
+              return input == null ? year : this.add((input - year), 'y');
+          },
 
-      var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
-      hammer.on('touch', this[navigationDivActions[i]].bind(this));
-      this.navigationHammers._new.push(hammer);
-    }
+          week : function (input) {
+              var week = this.localeData().week(this);
+              return input == null ? week : this.add((input - week) * 7, 'd');
+          },
 
-    this._navigationReleaseOverload = this._stopMovement;
+          isoWeek : function (input) {
+              var week = weekOfYear(this, 1, 4).week;
+              return input == null ? week : this.add((input - week) * 7, 'd');
+          },
 
-    this.navigationHammers.existing = this.navigationHammers._new;
-  };
+          weekday : function (input) {
+              var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7;
+              return input == null ? weekday : this.add(input - weekday, 'd');
+          },
 
+          isoWeekday : function (input) {
+              // behaves the same as moment#day except
+              // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6)
+              // as a setter, sunday should belong to the previous week.
+              return input == null ? this.day() || 7 : this.day(this.day() % 7 ? input : input - 7);
+          },
 
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._zoomExtent = function(event) {
-    this.zoomExtent({duration:700});
-    event.stopPropagation();
-  };
+          isoWeeksInYear : function () {
+              return weeksInYear(this.year(), 1, 4);
+          },
 
-  /**
-   * this stops all movement induced by the navigation buttons
-   *
-   * @private
-   */
-  exports._stopMovement = function() {
-    this._xStopMoving();
-    this._yStopMoving();
-    this._stopZoom();
-  };
+          weeksInYear : function () {
+              var weekInfo = this.localeData()._week;
+              return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
+          },
 
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units]();
+          },
 
-  /**
-   * move the screen up
-   * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
-   * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently
-   * To avoid this behaviour, we do the translation in the start loop.
-   *
-   * @private
-   */
-  exports._moveUp = function(event) {
-    this.yIncrement = this.constants.keyboard.speed.y;
-    this.start(); // if there is no node movement, the calculation wont be done
-    event.preventDefault();
-  };
+          set : function (units, value) {
+              var unit;
+              if (typeof units === 'object') {
+                  for (unit in units) {
+                      this.set(unit, units[unit]);
+                  }
+              }
+              else {
+                  units = normalizeUnits(units);
+                  if (typeof this[units] === 'function') {
+                      this[units](value);
+                  }
+              }
+              return this;
+          },
 
+          // If passed a locale key, it will set the locale for this
+          // instance.  Otherwise, it will return the locale configuration
+          // variables for this instance.
+          locale : function (key) {
+              var newLocaleData;
 
-  /**
-   * move the screen down
-   * @private
-   */
-  exports._moveDown = function(event) {
-    this.yIncrement = -this.constants.keyboard.speed.y;
-    this.start(); // if there is no node movement, the calculation wont be done
-    event.preventDefault();
-  };
+              if (key === undefined) {
+                  return this._locale._abbr;
+              } else {
+                  newLocaleData = moment.localeData(key);
+                  if (newLocaleData != null) {
+                      this._locale = newLocaleData;
+                  }
+                  return this;
+              }
+          },
 
+          lang : deprecate(
+              'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.',
+              function (key) {
+                  if (key === undefined) {
+                      return this.localeData();
+                  } else {
+                      return this.locale(key);
+                  }
+              }
+          ),
 
-  /**
-   * move the screen left
-   * @private
-   */
-  exports._moveLeft = function(event) {
-    this.xIncrement = this.constants.keyboard.speed.x;
-    this.start(); // if there is no node movement, the calculation wont be done
-    event.preventDefault();
-  };
+          localeData : function () {
+              return this._locale;
+          },
 
+          _dateUtcOffset : function () {
+              // On Firefox.24 Date#getTimezoneOffset returns a floating point.
+              // https://github.com/moment/moment/pull/1871
+              return -Math.round(this._d.getTimezoneOffset() / 15) * 15;
+          }
 
-  /**
-   * move the screen right
-   * @private
-   */
-  exports._moveRight = function(event) {
-    this.xIncrement = -this.constants.keyboard.speed.y;
-    this.start(); // if there is no node movement, the calculation wont be done
-    event.preventDefault();
-  };
+      });
 
+      function rawMonthSetter(mom, value) {
+          var dayOfMonth;
 
-  /**
-   * Zoom in, using the same method as the movement.
-   * @private
-   */
-  exports._zoomIn = function(event) {
-    this.zoomIncrement = this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    event.preventDefault();
-  };
+          // TODO: Move this out of here!
+          if (typeof value === 'string') {
+              value = mom.localeData().monthsParse(value);
+              // TODO: Another silent failure?
+              if (typeof value !== 'number') {
+                  return mom;
+              }
+          }
 
+          dayOfMonth = Math.min(mom.date(),
+                  daysInMonth(mom.year(), value));
+          mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
+          return mom;
+      }
 
-  /**
-   * Zoom out
-   * @private
-   */
-  exports._zoomOut = function(event) {
-    this.zoomIncrement = -this.constants.keyboard.speed.zoom;
-    this.start(); // if there is no node movement, the calculation wont be done
-    event.preventDefault();
-  };
+      function rawGetter(mom, unit) {
+          return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
+      }
 
+      function rawSetter(mom, unit, value) {
+          if (unit === 'Month') {
+              return rawMonthSetter(mom, value);
+          } else {
+              return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
+          }
+      }
 
-  /**
-   * Stop zooming and unhighlight the zoom controls
-   * @private
-   */
-  exports._stopZoom = function(event) {
-    this.zoomIncrement = 0;
-    event && event.preventDefault();
-  };
+      function makeAccessor(unit, keepTime) {
+          return function (value) {
+              if (value != null) {
+                  rawSetter(this, unit, value);
+                  moment.updateOffset(this, keepTime);
+                  return this;
+              } else {
+                  return rawGetter(this, unit);
+              }
+          };
+      }
 
+      moment.fn.millisecond = moment.fn.milliseconds = makeAccessor('Milliseconds', false);
+      moment.fn.second = moment.fn.seconds = makeAccessor('Seconds', false);
+      moment.fn.minute = moment.fn.minutes = makeAccessor('Minutes', false);
+      // Setting the hour should keep the time, because the user explicitly
+      // specified which hour he wants. So trying to maintain the same hour (in
+      // a new timezone) makes sense. Adding/subtracting hours does not follow
+      // this rule.
+      moment.fn.hour = moment.fn.hours = makeAccessor('Hours', true);
+      // moment.fn.month is defined separately
+      moment.fn.date = makeAccessor('Date', true);
+      moment.fn.dates = deprecate('dates accessor is deprecated. Use date instead.', makeAccessor('Date', true));
+      moment.fn.year = makeAccessor('FullYear', true);
+      moment.fn.years = deprecate('years accessor is deprecated. Use year instead.', makeAccessor('FullYear', true));
 
-  /**
-   * Stop moving in the Y direction and unHighlight the up and down
-   * @private
-   */
-  exports._yStopMoving = function(event) {
-    this.yIncrement = 0;
-    event && event.preventDefault();
-  };
+      // add plural methods
+      moment.fn.days = moment.fn.day;
+      moment.fn.months = moment.fn.month;
+      moment.fn.weeks = moment.fn.week;
+      moment.fn.isoWeeks = moment.fn.isoWeek;
+      moment.fn.quarters = moment.fn.quarter;
 
+      // add aliased format methods
+      moment.fn.toJSON = moment.fn.toISOString;
 
-  /**
-   * Stop moving in the X direction and unHighlight left and right.
-   * @private
-   */
-  exports._xStopMoving = function(event) {
-    this.xIncrement = 0;
-    event && event.preventDefault();
-  };
+      // alias isUtc for dev-friendliness
+      moment.fn.isUTC = moment.fn.isUtc;
 
+      /************************************
+          Duration Prototype
+      ************************************/
 
-/***/ },
-/* 66 */
-/***/ function(module, exports, __webpack_require__) {
 
-  exports._resetLevels = function() {
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        var node = this.nodes[nodeId];
-        if (node.preassignedLevel == false) {
-          node.level = -1;
-          node.hierarchyEnumerated = false;
-        }
+      function daysToYears (days) {
+          // 400 years have 146097 days (taking into account leap year rules)
+          return days * 400 / 146097;
       }
-    }
-  };
-
-  /**
-   * This is the main function to layout the nodes in a hierarchical way.
-   * It checks if the node details are supplied correctly
-   *
-   * @private
-   */
-  exports._setupHierarchicalLayout = function() {
-    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
-      // get the size of the largest hubs and check if the user has defined a level for a node.
-      var hubsize = 0;
-      var node, nodeId;
-      var definedLevel = false;
-      var undefinedLevel = false;
 
-      for (nodeId in this.nodes) {
-        if (this.nodes.hasOwnProperty(nodeId)) {
-          node = this.nodes[nodeId];
-          if (node.level != -1) {
-            definedLevel = true;
-          }
-          else {
-            undefinedLevel = true;
-          }
-          if (hubsize < node.edges.length) {
-            hubsize = node.edges.length;
-          }
-        }
+      function yearsToDays (years) {
+          // years * 365 + absRound(years / 4) -
+          //     absRound(years / 100) + absRound(years / 400);
+          return years * 146097 / 400;
       }
 
-      // if the user defined some levels but not all, alert and run without hierarchical layout
-      if (undefinedLevel == true && definedLevel == true) {
-        throw new Error("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-        this.zoomExtent(undefined,true,this.constants.clustering.enabled);
-        if (!this.constants.clustering.enabled) {
-          this.start();
-        }
-      }
-      else {
-        // setup the system to use hierarchical method.
-        this._changeConstants();
+      extend(moment.duration.fn = Duration.prototype, {
 
-        // define levels if undefined by the users. Based on hubsize
-        if (undefinedLevel == true) {
-          if (this.constants.hierarchicalLayout.layout == "hubsize") {
-            this._determineLevels(hubsize);
-          }
-          else {
-            this._determineLevelsDirected(false);
-          }
+          _bubble : function () {
+              var milliseconds = this._milliseconds,
+                  days = this._days,
+                  months = this._months,
+                  data = this._data,
+                  seconds, minutes, hours, years = 0;
 
-        }
-        // check the distribution of the nodes per level.
-        var distribution = this._getDistribution();
+              // The following code bubbles up values, see the tests for
+              // examples of what that means.
+              data.milliseconds = milliseconds % 1000;
 
-        // place the nodes on the canvas. This also stablilizes the system.
-        this._placeNodesByHierarchy(distribution);
+              seconds = absRound(milliseconds / 1000);
+              data.seconds = seconds % 60;
 
-        // start the simulation.
-        this.start();
-      }
-    }
-  };
+              minutes = absRound(seconds / 60);
+              data.minutes = minutes % 60;
+
+              hours = absRound(minutes / 60);
+              data.hours = hours % 24;
+
+              days += absRound(hours / 24);
+
+              // Accurately convert days to years, assume start from year 0.
+              years = absRound(daysToYears(days));
+              days -= absRound(yearsToDays(years));
+
+              // 30 days to a month
+              // TODO (iskren): Use anchor date (like 1st Jan) to compute this.
+              months += absRound(days / 30);
+              days %= 30;
+
+              // 12 months -> 1 year
+              years += absRound(months / 12);
+              months %= 12;
 
+              data.days = days;
+              data.months = months;
+              data.years = years;
+          },
 
-  /**
-   * This function places the nodes on the canvas based on the hierarchial distribution.
-   *
-   * @param {Object} distribution | obtained by the function this._getDistribution()
-   * @private
-   */
-  exports._placeNodesByHierarchy = function(distribution) {
-    var nodeId, node;
+          abs : function () {
+              this._milliseconds = Math.abs(this._milliseconds);
+              this._days = Math.abs(this._days);
+              this._months = Math.abs(this._months);
 
-    // start placing all the level 0 nodes first. Then recursively position their branches.
-    for (var level in distribution) {
-      if (distribution.hasOwnProperty(level)) {
+              this._data.milliseconds = Math.abs(this._data.milliseconds);
+              this._data.seconds = Math.abs(this._data.seconds);
+              this._data.minutes = Math.abs(this._data.minutes);
+              this._data.hours = Math.abs(this._data.hours);
+              this._data.months = Math.abs(this._data.months);
+              this._data.years = Math.abs(this._data.years);
 
-        for (nodeId in distribution[level].nodes) {
-          if (distribution[level].nodes.hasOwnProperty(nodeId)) {
-            node = distribution[level].nodes[nodeId];
-            if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-              if (node.xFixed) {
-                node.x = distribution[level].minPos;
-                node.xFixed = false;
+              return this;
+          },
 
-                distribution[level].minPos += distribution[level].nodeSpacing;
-              }
-            }
-            else {
-              if (node.yFixed) {
-                node.y = distribution[level].minPos;
-                node.yFixed = false;
+          weeks : function () {
+              return absRound(this.days() / 7);
+          },
 
-                distribution[level].minPos += distribution[level].nodeSpacing;
-              }
-            }
-            this._placeBranchNodes(node.edges,node.id,distribution,node.level);
-          }
-        }
-      }
-    }
+          valueOf : function () {
+              return this._milliseconds +
+                this._days * 864e5 +
+                (this._months % 12) * 2592e6 +
+                toInt(this._months / 12) * 31536e6;
+          },
 
-    // stabilize the system after positioning. This function calls zoomExtent.
-    this._stabilize();
-  };
+          humanize : function (withSuffix) {
+              var output = relativeTime(this, !withSuffix, this.localeData());
 
+              if (withSuffix) {
+                  output = this.localeData().pastFuture(+this, output);
+              }
 
-  /**
-   * This function get the distribution of levels based on hubsize
-   *
-   * @returns {Object}
-   * @private
-   */
-  exports._getDistribution = function() {
-    var distribution = {};
-    var nodeId, node, level;
+              return this.localeData().postformat(output);
+          },
 
-    // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
-    // the fix of X is removed after the x value has been set.
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        node.xFixed = true;
-        node.yFixed = true;
-        if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-          node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
-        }
-        else {
-          node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
-        }
-        if (distribution[node.level] === undefined) {
-          distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
-        }
-        distribution[node.level].amount += 1;
-        distribution[node.level].nodes[nodeId] = node;
-      }
-    }
+          add : function (input, val) {
+              // supports only 2.0-style add(1, 's') or add(moment)
+              var dur = moment.duration(input, val);
 
-    // determine the largest amount of nodes of all levels
-    var maxCount = 0;
-    for (level in distribution) {
-      if (distribution.hasOwnProperty(level)) {
-        if (maxCount < distribution[level].amount) {
-          maxCount = distribution[level].amount;
-        }
-      }
-    }
+              this._milliseconds += dur._milliseconds;
+              this._days += dur._days;
+              this._months += dur._months;
 
-    // set the initial position and spacing of each nodes accordingly
-    for (level in distribution) {
-      if (distribution.hasOwnProperty(level)) {
-        distribution[level].nodeSpacing = (maxCount + 1) * this.constants.hierarchicalLayout.nodeSpacing;
-        distribution[level].nodeSpacing /= (distribution[level].amount + 1);
-        distribution[level].minPos = distribution[level].nodeSpacing - (0.5 * (distribution[level].amount + 1) * distribution[level].nodeSpacing);
-      }
-    }
+              this._bubble();
 
-    return distribution;
-  };
+              return this;
+          },
 
+          subtract : function (input, val) {
+              var dur = moment.duration(input, val);
 
-  /**
-   * this function allocates nodes in levels based on the recursive branching from the largest hubs.
-   *
-   * @param hubsize
-   * @private
-   */
-  exports._determineLevels = function(hubsize) {
-    var nodeId, node;
+              this._milliseconds -= dur._milliseconds;
+              this._days -= dur._days;
+              this._months -= dur._months;
 
-    // determine hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.edges.length == hubsize) {
-          node.level = 0;
-        }
-      }
-    }
+              this._bubble();
 
-    // branch from hubs
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        if (node.level == 0) {
-          this._setLevel(1,node.edges,node.id);
-        }
-      }
-    }
-  };
+              return this;
+          },
 
+          get : function (units) {
+              units = normalizeUnits(units);
+              return this[units.toLowerCase() + 's']();
+          },
 
+          as : function (units) {
+              var days, months;
+              units = normalizeUnits(units);
 
-  /**
-   * this function allocates nodes in levels based on the direction of the edges
-   *
-   * @param hubsize
-   * @private
-   */
-  exports._determineLevelsDirected = function() {
-    var nodeId, node, firstNode;
-    var minLevel = 10000;
+              if (units === 'month' || units === 'year') {
+                  days = this._days + this._milliseconds / 864e5;
+                  months = this._months + daysToYears(days) * 12;
+                  return units === 'month' ? months : months / 12;
+              } else {
+                  // handle milliseconds separately because of floating point math errors (issue #1867)
+                  days = this._days + Math.round(yearsToDays(this._months / 12));
+                  switch (units) {
+                      case 'week': return days / 7 + this._milliseconds / 6048e5;
+                      case 'day': return days + this._milliseconds / 864e5;
+                      case 'hour': return days * 24 + this._milliseconds / 36e5;
+                      case 'minute': return days * 24 * 60 + this._milliseconds / 6e4;
+                      case 'second': return days * 24 * 60 * 60 + this._milliseconds / 1000;
+                      // Math.floor prevents floating point math errors here
+                      case 'millisecond': return Math.floor(days * 24 * 60 * 60 * 1000) + this._milliseconds;
+                      default: throw new Error('Unknown unit ' + units);
+                  }
+              }
+          },
 
-    // set first node to source
-    firstNode = this.nodes[this.nodeIndices[0]];
-    firstNode.level = minLevel;
-    this._setLevelDirected(minLevel,firstNode.edges,firstNode.id);
+          lang : moment.fn.lang,
+          locale : moment.fn.locale,
 
-    // get the minimum level
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        minLevel = node.level < minLevel ? node.level : minLevel;
-      }
-    }
+          toIsoString : deprecate(
+              'toIsoString() is deprecated. Please use toISOString() instead ' +
+              '(notice the capitals)',
+              function () {
+                  return this.toISOString();
+              }
+          ),
 
-    // subtract the minimum from the set so we have a range starting from 0
-    for (nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        node = this.nodes[nodeId];
-        node.level -= minLevel;
-      }
-    }
-  };
+          toISOString : function () {
+              // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
+              var years = Math.abs(this.years()),
+                  months = Math.abs(this.months()),
+                  days = Math.abs(this.days()),
+                  hours = Math.abs(this.hours()),
+                  minutes = Math.abs(this.minutes()),
+                  seconds = Math.abs(this.seconds() + this.milliseconds() / 1000);
 
+              if (!this.asSeconds()) {
+                  // this is the same as C#'s (Noda) and python (isodate)...
+                  // but not other JS (goog.date)
+                  return 'P0D';
+              }
 
-  /**
-   * Since hierarchical layout does not support:
-   *    - smooth curves (based on the physics),
-   *    - clustering (based on dynamic node counts)
-   *
-   * We disable both features so there will be no problems.
-   *
-   * @private
-   */
-  exports._changeConstants = function() {
-    this.constants.clustering.enabled = false;
-    this.constants.physics.barnesHut.enabled = false;
-    this.constants.physics.hierarchicalRepulsion.enabled = true;
-    this._loadSelectedForceSolver();
-    if (this.constants.smoothCurves.enabled == true) {
-      this.constants.smoothCurves.dynamic = false;
-    }
-    this._configureSmoothCurves();
+              return (this.asSeconds() < 0 ? '-' : '') +
+                  'P' +
+                  (years ? years + 'Y' : '') +
+                  (months ? months + 'M' : '') +
+                  (days ? days + 'D' : '') +
+                  ((hours || minutes || seconds) ? 'T' : '') +
+                  (hours ? hours + 'H' : '') +
+                  (minutes ? minutes + 'M' : '') +
+                  (seconds ? seconds + 'S' : '');
+          },
 
-    var config = this.constants.hierarchicalLayout;
-    config.levelSeparation = Math.abs(config.levelSeparation);
-    if (config.direction == "RL" || config.direction == "DU") {
-      config.levelSeparation *= -1;
-    }
+          localeData : function () {
+              return this._locale;
+          },
 
-    if (config.direction == "RL" || config.direction == "LR") {
-      if (this.constants.smoothCurves.enabled == true) {
-        this.constants.smoothCurves.type = "vertical";
-      }
-    }
-    else {
-      if (this.constants.smoothCurves.enabled == true) {
-        this.constants.smoothCurves.type = "horizontal";
-      }
-    }
-  };
+          toJSON : function () {
+              return this.toISOString();
+          }
+      });
 
+      moment.duration.fn.toString = moment.duration.fn.toISOString;
 
-  /**
-   * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
-   * on a X position that ensures there will be no overlap.
-   *
-   * @param edges
-   * @param parentId
-   * @param distribution
-   * @param parentLevel
-   * @private
-   */
-  exports._placeBranchNodes = function(edges, parentId, distribution, parentLevel) {
-    for (var i = 0; i < edges.length; i++) {
-      var childNode = null;
-      if (edges[i].toId == parentId) {
-        childNode = edges[i].from;
-      }
-      else {
-        childNode = edges[i].to;
+      function makeDurationGetter(name) {
+          moment.duration.fn[name] = function () {
+              return this._data[name];
+          };
       }
 
-      // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
-      var nodeMoved = false;
-      if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
-        if (childNode.xFixed && childNode.level > parentLevel) {
-          childNode.xFixed = false;
-          childNode.x = distribution[childNode.level].minPos;
-          nodeMoved = true;
-        }
-      }
-      else {
-        if (childNode.yFixed && childNode.level > parentLevel) {
-          childNode.yFixed = false;
-          childNode.y = distribution[childNode.level].minPos;
-          nodeMoved = true;
-        }
+      for (i in unitMillisecondFactors) {
+          if (hasOwnProp(unitMillisecondFactors, i)) {
+              makeDurationGetter(i.toLowerCase());
+          }
       }
 
-      if (nodeMoved == true) {
-        distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
-        if (childNode.edges.length > 1) {
-          this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
-        }
-      }
-    }
-  };
+      moment.duration.fn.asMilliseconds = function () {
+          return this.as('ms');
+      };
+      moment.duration.fn.asSeconds = function () {
+          return this.as('s');
+      };
+      moment.duration.fn.asMinutes = function () {
+          return this.as('m');
+      };
+      moment.duration.fn.asHours = function () {
+          return this.as('h');
+      };
+      moment.duration.fn.asDays = function () {
+          return this.as('d');
+      };
+      moment.duration.fn.asWeeks = function () {
+          return this.as('weeks');
+      };
+      moment.duration.fn.asMonths = function () {
+          return this.as('M');
+      };
+      moment.duration.fn.asYears = function () {
+          return this.as('y');
+      };
 
+      /************************************
+          Default Locale
+      ************************************/
 
-  /**
-   * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
-   *
-   * @param level
-   * @param edges
-   * @param parentId
-   * @private
-   */
-  exports._setLevel = function(level, edges, parentId) {
-    for (var i = 0; i < edges.length; i++) {
-      var childNode = null;
-      if (edges[i].toId == parentId) {
-        childNode = edges[i].from;
-      }
-      else {
-        childNode = edges[i].to;
-      }
-      if (childNode.level == -1 || childNode.level > level) {
-        childNode.level = level;
-        if (childNode.edges.length > 1) {
-          this._setLevel(level+1, childNode.edges, childNode.id);
-        }
-      }
-    }
-  };
 
+      // Set default locale, other locale will inherit from English.
+      moment.locale('en', {
+          ordinalParse: /\d{1,2}(th|st|nd|rd)/,
+          ordinal : function (number) {
+              var b = number % 10,
+                  output = (toInt(number % 100 / 10) === 1) ? 'th' :
+                  (b === 1) ? 'st' :
+                  (b === 2) ? 'nd' :
+                  (b === 3) ? 'rd' : 'th';
+              return number + output;
+          }
+      });
 
-  /**
-   * this function is called recursively to enumerate the branched of the first node and give each node a level based on edge direction
-   *
-   * @param level
-   * @param edges
-   * @param parentId
-   * @private
-   */
-  exports._setLevelDirected = function(level, edges, parentId) {
-    this.nodes[parentId].hierarchyEnumerated = true;
-    var childNode, direction;
-    for (var i = 0; i < edges.length; i++) {
-      direction = 1;
-      if (edges[i].toId == parentId) {
-        childNode = edges[i].from;
-        direction = -1;
-      }
-      else {
-        childNode = edges[i].to;
-      }
-      if (childNode.level == -1) {
-        childNode.level = level + direction;
-      }
-    }
+      /* EMBED_LOCALES */
 
-    for (var i = 0; i < edges.length; i++) {
-      if (edges[i].toId == parentId) {childNode = edges[i].from;}
-      else {childNode = edges[i].to;}
+      /************************************
+          Exposing Moment
+      ************************************/
 
-      if (childNode.edges.length > 1 && childNode.hierarchyEnumerated === false) {
-        this._setLevelDirected(childNode.level, childNode.edges, childNode.id);
+      function makeGlobal(shouldDeprecate) {
+          /*global ender:false */
+          if (typeof ender !== 'undefined') {
+              return;
+          }
+          oldGlobalMoment = globalScope.moment;
+          if (shouldDeprecate) {
+              globalScope.moment = deprecate(
+                      'Accessing Moment through the global scope is ' +
+                      'deprecated, and will be removed in an upcoming ' +
+                      'release.',
+                      moment);
+          } else {
+              globalScope.moment = moment;
+          }
       }
-    }
-  };
 
+      // CommonJS module is defined
+      if (hasModule) {
+          module.exports = moment;
+      } else if (true) {
+          !(__WEBPACK_AMD_DEFINE_RESULT__ = function (require, exports, module) {
+              if (module.config && module.config() && module.config().noGlobal === true) {
+                  // release the global variable
+                  globalScope.moment = oldGlobalMoment;
+              }
 
-  /**
-   * Unfix nodes
-   *
-   * @private
-   */
-  exports._restoreNodes = function() {
-    for (var nodeId in this.nodes) {
-      if (this.nodes.hasOwnProperty(nodeId)) {
-        this.nodes[nodeId].xFixed = false;
-        this.nodes[nodeId].yFixed = false;
+              return moment;
+          }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+          makeGlobal(true);
+      } else {
+          makeGlobal();
       }
-    }
-  };
-
+  }).call(this);
+  
+  /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(71)(module)))
 
 /***/ },
 /* 67 */
-/***/ function(module, exports, __webpack_require__) {
-
-  function webpackContext(req) {
-  	throw new Error("Cannot find module '" + req + "'.");
-  }
-  webpackContext.keys = function() { return []; };
-  webpackContext.resolve = webpackContext;
-  module.exports = webpackContext;
-  webpackContext.id = 67;
-
-
-/***/ },
-/* 68 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
@@ -34178,7 +34291,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 69 */
+/* 68 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
@@ -34337,7 +34450,7 @@ return /******/ (function(modules) { // webpackBootstrap
   };
 
 /***/ },
-/* 70 */
+/* 69 */
 /***/ function(module, exports, __webpack_require__) {
 
   /**
@@ -34741,6 +34854,19 @@ return /******/ (function(modules) { // webpackBootstrap
   };
 
 
+/***/ },
+/* 70 */
+/***/ function(module, exports, __webpack_require__) {
+
+  function webpackContext(req) {
+  	throw new Error("Cannot find module '" + req + "'.");
+  }
+  webpackContext.keys = function() { return []; };
+  webpackContext.resolve = webpackContext;
+  module.exports = webpackContext;
+  webpackContext.id = 70;
+
+
 /***/ },
 /* 71 */
 /***/ function(module, exports, __webpack_require__) {
diff --git a/docs/network.html b/docs/network.html
index 8e206f15..f2e01e0c 100644
--- a/docs/network.html
+++ b/docs/network.html
@@ -2209,7 +2209,7 @@ var options = {
         </td>
     </tr>
   <tr>
-    <td>getBoundingBox()</td>
+    <td>getBoundingBox(nodeId)</td>
     <td>Object</td>
     <td>Returns a bounding box for the node including label in the format: {top:Number,left:Number,right:Number,bottom:Number}. These values are in canvas space.
     </td>
@@ -2329,6 +2329,12 @@ var options = {
       nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
     </td>
   </tr>
+  <tr>
+    <td>getConnectedNodes(nodeId)</td>
+    <td>Array</td>
+    <td>Get an array of (unique) nodeIds that are directly connected to this node.
+    </td>
+  </tr>
   <tr>
     <td>selectEdges(selection)</td>
     <td>none</td>
@@ -2348,7 +2354,7 @@ var options = {
       or in percentages.</td>
   </tr>
     <tr>
-        <td>getPositions([ids])</td>
+        <td>getPositions([nodeIds])</td>
         <td>Object</td>
         <td>This will return an object of all nodes' positions. Data can be accessed with object[nodeId].x and .y. You can optionally supply an id as string or number or an array of ids. If no id or array of ids have been supplied, all positions are returned.
         </td>
@@ -2370,6 +2376,7 @@ var options = {
     options can just be a boolean. When true, the zoom is animated, when false there is no animation.
         Alternatively, you can supply an object.
         <br /><br /> The object can consist of:<br />
+        <b><code>nodes: [nodeIds]</code></b><br /> - an optional subset of nodes to zoom in on,<br />
         <b><code>duration: Number</code></b><br /> - the duration of the animation in milliseconds,<br />
         <b><code>easingFunction: String</code></b><br /> - the easing function of the animation, available are:<br />
         <code>linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
@@ -2378,6 +2385,7 @@ var options = {
     </td>
   </tr>
 
+
 </table>
 
 <h2 id="Events">Events</h2>
diff --git a/examples/network/25_physics_configuration.html b/examples/network/25_physics_configuration.html
index 104040be..1d42c625 100644
--- a/examples/network/25_physics_configuration.html
+++ b/examples/network/25_physics_configuration.html
@@ -78,6 +78,7 @@
       };
 
     var options = {
+        edges:{opacity:0.2},
         stabilize: false,
         configurePhysics:true
     };
diff --git a/examples/network/29_neighbourhood_highlight.html b/examples/network/29_neighbourhood_highlight.html
index 783dfb29..e72b4cdd 100644
--- a/examples/network/29_neighbourhood_highlight.html
+++ b/examples/network/29_neighbourhood_highlight.html
@@ -10047,7 +10047,7 @@ function redrawAll() {
     };
 
     network = new vis.Network(container, data, options);
-    network.on("click",onClick);
+//    network.on("click",onClick);
 }
 
 
diff --git a/lib/network/Edge.js b/lib/network/Edge.js
index 2735ebf9..7bad3dd3 100644
--- a/lib/network/Edge.js
+++ b/lib/network/Edge.js
@@ -40,6 +40,7 @@ function Edge (properties, network, networkConstants) {
   this.hover = false;
   this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
   this.dirtyLabel = true;
+  this.colorDirty = true;
 
   this.from = null;   // a node
   this.to = null;     // a node
@@ -71,12 +72,13 @@ function Edge (properties, network, networkConstants) {
  * @param {Object} constants   and object with default, global properties
  */
 Edge.prototype.setProperties = function(properties) {
+  this.colorDirty = true;
   if (!properties) {
     return;
   }
 
   var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
-    'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment'
+    'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment', 'opacity'
   ];
   util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -103,7 +105,9 @@ Edge.prototype.setProperties = function(properties) {
     }
   }
 
-  // A node is connected when it has a from and to node.
+
+
+    // A node is connected when it has a from and to node.
   this.connect();
 
   this.widthFixed = this.widthFixed || (properties.width !== undefined);
@@ -119,9 +123,9 @@ Edge.prototype.setProperties = function(properties) {
     case 'dash-line':     this.draw = this._drawDashLine; break;
     default:              this.draw = this._drawLine; break;
   }
-  
 };
 
+
 /**
  * Connect an edge to its nodes
  */
@@ -230,19 +234,23 @@ Edge.prototype.isOverlappingWith = function(obj) {
 
 Edge.prototype._getColor = function() {
   var colorObj = this.options.color;
-  if (this.options.inheritColor == "to") {
-    colorObj = {
-      highlight: this.to.options.color.highlight.border,
-      hover: this.to.options.color.hover.border,
-      color: this.to.options.color.border
-    };
-  }
-  else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
-    colorObj = {
-      highlight: this.from.options.color.highlight.border,
-      hover: this.from.options.color.hover.border,
-      color: this.from.options.color.border
-    };
+  if (this.colorDirty === true) {
+    if (this.options.inheritColor == "to") {
+      colorObj = {
+        highlight: this.to.options.color.highlight.border,
+        hover: this.to.options.color.hover.border,
+        color: util.overrideOpacity(this.from.options.color.border, this.options.opacity)
+      };
+    }
+    else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
+      colorObj = {
+        highlight: this.from.options.color.highlight.border,
+        hover: this.from.options.color.hover.border,
+        color: util.overrideOpacity(this.from.options.color.border, this.options.opacity)
+      };
+    }
+    this.options.color = colorObj;
+    this.colorDirty = false;
   }
 
   if (this.selected == true)   {return colorObj.highlight;}
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 38934b76..d8f64d64 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -69,7 +69,12 @@ function Network (container, data, options) {
       fontFace: 'verdana',
       fontFill: undefined,
       fontStrokeWidth: 0, // px
-      fontStrokeColor: 'white',
+      fontStrokeColor: '#ffffff',
+      fontDrawThreshold: 3,
+      scaleFontWithValue: false,
+      fontSizeMin: 14,
+      fontSizeMax: 30,
+      fontSizeMaxVisible: 30,
       level: -1,
       color: {
           border: '#2B7CE9',
@@ -99,6 +104,7 @@ function Network (container, data, options) {
         highlight:'#848484',
         hover: '#848484'
       },
+      opacity:1.0,
       fontColor: '#343434',
       fontSize: 14, // px
       fontFace: 'arial',
@@ -163,8 +169,8 @@ function Network (container, data, options) {
                     height: 1,      // (px PNiC)             | growth of the height per node in cluster.
                     radius: 1},     // (px PNiC)             | growth of the radius per node in cluster.
       maxNodeSizeIncrements: 600,   // (# increments)        | max growth of the width  per node in cluster.
-      activeAreaBoxSize: 80,       // (px)                  | box area around the curser where clusters are popped open.
-      clusterLevelDifference: 2,
+      activeAreaBoxSize: 80,        // (px)                  | box area around the curser where clusters are popped open.
+      clusterLevelDifference: 2,    // used for normalization of the cluster levels
       clusterByZoom: true           // enable clustering through zooming in and out
     },
     navigation: {
@@ -193,7 +199,7 @@ function Network (container, data, options) {
       type: "continuous",
       roundness: 0.5
     },
-    maxVelocity:  30,
+    maxVelocity:  50,
     minVelocity:  0.1,   // px/s
     stabilize: true,  // stabilize before displaying the network
     stabilizationIterations: 1000,  // maximum number of iteration to stabilize
@@ -346,7 +352,7 @@ function Network (container, data, options) {
   else {
     // zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
     if (this.constants.stabilize == false) {
-      this.zoomExtent(undefined, true,this.constants.clustering.enabled);
+      this.zoomExtent({duration:0}, true, this.constants.clustering.enabled);
     }
   }
 
@@ -406,17 +412,45 @@ Network.prototype._getScriptPath = function() {
  * Find the center position of the network
  * @private
  */
-Network.prototype._getRange = function() {
+Network.prototype._getRange = function(specificNodes) {
   var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
-  for (var nodeId in this.nodes) {
-    if (this.nodes.hasOwnProperty(nodeId)) {
-      node = this.nodes[nodeId];
-      if (minX > (node.boundingBox.left)) {minX = node.boundingBox.left;}
-      if (maxX < (node.boundingBox.right)) {maxX = node.boundingBox.right;}
-      if (minY > (node.boundingBox.bottom)) {minY = node.boundingBox.top;} // top is negative, bottom is positive
-      if (maxY < (node.boundingBox.top)) {maxY = node.boundingBox.bottom;} // top is negative, bottom is positive
+  if (specificNodes.length > 0) {
+    for (var i = 0; i < specificNodes.length; i++) {
+      node = this.nodes[specificNodes[i]];
+      if (minX > (node.boundingBox.left)) {
+        minX = node.boundingBox.left;
+      }
+      if (maxX < (node.boundingBox.right)) {
+        maxX = node.boundingBox.right;
+      }
+      if (minY > (node.boundingBox.bottom)) {
+        minY = node.boundingBox.top;
+      } // top is negative, bottom is positive
+      if (maxY < (node.boundingBox.top)) {
+        maxY = node.boundingBox.bottom;
+      } // top is negative, bottom is positive
+    }
+  }
+  else {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        node = this.nodes[nodeId];
+        if (minX > (node.boundingBox.left)) {
+          minX = node.boundingBox.left;
+        }
+        if (maxX < (node.boundingBox.right)) {
+          maxX = node.boundingBox.right;
+        }
+        if (minY > (node.boundingBox.bottom)) {
+          minY = node.boundingBox.top;
+        } // top is negative, bottom is positive
+        if (maxY < (node.boundingBox.top)) {
+          maxY = node.boundingBox.bottom;
+        } // top is negative, bottom is positive
+      }
     }
   }
+
   if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
     minY = 0, maxY = 0, minX = 0, maxX = 0;
   }
@@ -441,17 +475,37 @@ Network.prototype._findCenter = function(range) {
  * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
  * @param {Boolean} [disableStart] | If true, start is not called.
  */
-Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableStart) {
+Network.prototype.zoomExtent = function(options, initialZoom, disableStart) {
   this._redraw(true);
 
   if (initialZoom      === undefined) {initialZoom = false;}
   if (disableStart     === undefined) {disableStart = false;}
-  if (animationOptions === undefined) {animationOptions = false;}
+  if (options === undefined) {options = {nodes:[]};}
+  if (options.nodes === undefined) {
+    options.nodes = [];
+  }
 
-  var range = this._getRange();
+  var range;
   var zoomLevel;
 
   if (initialZoom == true) {
+    // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
+    var positionDefined = 0;
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        if (node.predefinedPosition == true) {
+          positionDefined += 1;
+        }
+      }
+    }
+    if (positionDefined > 0.5 * this.nodeIndices.length) {
+      this.zoomExtent(options,false,disableStart);
+      return;
+    }
+
+    range = this._getRange(options.nodes);
+
     var numberOfNodes = this.nodeIndices.length;
     if (this.constants.smoothCurves == true) {
       if (this.constants.clustering.enabled == true &&
@@ -477,6 +531,7 @@ Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableSt
     zoomLevel *= factor;
   }
   else {
+    range = this._getRange(options.nodes);
     var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
     var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
 
@@ -492,7 +547,7 @@ Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableSt
 
   var center = this._findCenter(range);
   if (disableStart == false) {
-    var options = {position: center, scale: zoomLevel, animation: animationOptions};
+    var options = {position: center, scale: zoomLevel, animation: options};
     this.moveTo(options);
     this.moving = true;
     this.start();
@@ -581,7 +636,7 @@ Network.prototype.setData = function(data, disableStart) {
     }
     else {
       // find a stable position or start animating to a stable position
-      if (this.constants.stabilize) {
+      if (this.constants.stabilize == true) {
         this._stabilize();
       }
     }
@@ -732,7 +787,7 @@ Network.prototype.setOptions = function (options) {
     // bind keys. If disabled, this will not do anything;
     this._createKeyBinds();
 
-
+    this._markAllEdgesAsDirty();
     this.setSize(this.constants.width, this.constants.height);
     this.moving = true;
     this.start();
@@ -1599,8 +1654,16 @@ Network.prototype._updateNodes = function(ids,changedData) {
   }
   this._updateNodeIndexList();
   this._updateValueRange(nodes);
+  this._markAllEdgesAsDirty();
 };
 
+
+Network.prototype._markAllEdgesAsDirty = function() {
+  for (var edgeId in this.edges) {
+    this.edges[edgeId].colorDirty = true;
+  }
+}
+
 /**
  * Remove existing nodes. If nodes do not exist, the method will just ignore it.
  * @param {Number[] | String[]} ids
@@ -2093,16 +2156,22 @@ Network.prototype._stabilize = function() {
   var count = 0;
   while (this.moving && count < this.constants.stabilizationIterations) {
     this._physicsTick();
+    if (count % 100 == 0) {
+      console.log("stabilizationIterations",count);
+    }
     count++;
   }
 
+
   if (this.constants.zoomExtentOnStabilize == true) {
-    this.zoomExtent(undefined, false, true);
+    this.zoomExtent({duration:0}, false, true);
   }
 
   if (this.constants.freezeForStabilization == true) {
     this._restoreFrozenNodes();
   }
+
+  this.emit("stabilizationIterationsDone");
 };
 
 /**
@@ -2152,8 +2221,10 @@ Network.prototype._restoreFrozenNodes = function() {
 Network.prototype._isMoving = function(vmin) {
   var nodes = this.nodes;
   for (var id in nodes) {
-    if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
-      return true;
+    if (nodes[id] !== undefined) {
+      if (nodes[id].isMoving(vmin) == true) {
+        return true;
+      }
     }
   }
   return false;
@@ -2236,11 +2307,12 @@ Network.prototype._physicsTick = function() {
       }
 
       // gather movement data from all sectors, if one moves, we are NOT stabilzied
-      for (var i = 0; i < mainMoving.length; i++) {mainMovingStatus = mainMoving[0] || mainMovingStatus;}
+      for (var i = 0; i < mainMoving.length; i++) {
+        mainMovingStatus = mainMoving[i] || mainMovingStatus;
+      }
 
       // determine if the network has stabilzied
       this.moving = mainMovingStatus || supportMovingStatus;
-
       if (this.moving == false) {
         this._revertPhysicsTick();
       }
@@ -2363,12 +2435,14 @@ Network.prototype._handleNavigation = function() {
 /**
  *  Freeze the _animationStep
  */
-Network.prototype.toggleFreeze = function() {
-  if (this.freezeSimulation == false) {
+Network.prototype.setFreezeSimulation = function(freeze) {
+  if (freeze == true) {
     this.freezeSimulation = true;
+    this.moving = false;
   }
   else {
     this.freezeSimulation = false;
+    this.moving = true;
     this.start();
   }
 };
@@ -2741,4 +2815,28 @@ Network.prototype.getBoundingBox = function(nodeId) {
   }
 }
 
+Network.prototype.getConnectedNodes = function(nodeId) {
+  var nodeList = [];
+  if (this.nodes[nodeId] !== undefined) {
+    var node = this.nodes[nodeId];
+    var nodeObj = {nodeId : true}; // used to quickly check if node already exists
+    for (var i = 0; i < node.edges.length; i++) {
+      var edge = node.edges[i];
+      if (edge.toId == nodeId) {
+        if (nodeObj[edge.fromId] === undefined) {
+          nodeList.push(edge.fromId);
+          nodeObj[edge.fromId] = true;
+        }
+      }
+      else if (edge.fromId == nodeId) {
+        if (nodeObj[edge.toId] === undefined) {
+          nodeList.push(edge.toId)
+          nodeObj[edge.toId] = true;
+        }
+      }
+    }
+  }
+  return nodeList;
+}
+
 module.exports = Network;
diff --git a/lib/network/Node.js b/lib/network/Node.js
index 28dd5548..59957c7a 100644
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@@ -36,8 +36,6 @@ function Node(properties, imagelist, grouplist, networkConstants) {
   this.dynamicEdges = [];
   this.reroutedEdges = {};
 
-  this.fontDrawThreshold = 3;
-
   // set defaults for the properties
   this.id = undefined;
   this.allowedToMoveX = false;
@@ -64,6 +62,7 @@ function Node(properties, imagelist, grouplist, networkConstants) {
   this.vy = 0.0;  // velocity y
   this.x = null;
   this.y = null;
+  this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
 
   // used for reverting to previous position on stabilization
   this.previousState = {vx:0,vy:0,x:0,y:0};
@@ -75,7 +74,6 @@ function Node(properties, imagelist, grouplist, networkConstants) {
 
   // creating the variables for clustering
   this.resetCluster();
-  this.dynamicEdgesLength = 0;
   this.clusterSession = 0;
   this.clusterSizeWidthFactor  = networkConstants.clustering.nodeScaling.width;
   this.clusterSizeHeightFactor = networkConstants.clustering.nodeScaling.height;
@@ -126,7 +124,6 @@ Node.prototype.attachEdge = function(edge) {
   if (this.dynamicEdges.indexOf(edge) == -1) {
     this.dynamicEdges.push(edge);
   }
-  this.dynamicEdgesLength = this.dynamicEdges.length;
 };
 
 /**
@@ -142,7 +139,6 @@ Node.prototype.detachEdge = function(edge) {
   if (index != -1) {
     this.dynamicEdges.splice(index, 1);
   }
-  this.dynamicEdgesLength = this.dynamicEdges.length;
 };
 
 
@@ -157,7 +153,8 @@ Node.prototype.setProperties = function(properties, constants) {
   }
 
   var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
-    'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass'
+    'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
+    'scaleFontWithValue','fontSizeMaxVisible'
   ];
   util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -165,8 +162,8 @@ Node.prototype.setProperties = function(properties, constants) {
   if (properties.id !== undefined)        {this.id = properties.id;}
   if (properties.label !== undefined)     {this.label = properties.label; this.originalLabel = properties.label;}
   if (properties.title !== undefined)     {this.title = properties.title;}
-  if (properties.x !== undefined)         {this.x = properties.x;}
-  if (properties.y !== undefined)         {this.y = properties.y;}
+  if (properties.x !== undefined)         {this.x = properties.x; this.predefinedPosition = true;}
+  if (properties.y !== undefined)         {this.y = properties.y; this.predefinedPosition = true;}
   if (properties.value !== undefined)     {this.value = properties.value;}
   if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
 
@@ -486,12 +483,20 @@ Node.prototype.setValueRange = function(min, max) {
   if (!this.radiusFixed && this.value !== undefined) {
     if (max == min) {
       this.options.radius= (this.options.radiusMin + this.options.radiusMax) / 2;
+      if (this.options.scaleFontWithValue == true) {
+        this.options.fontSize = (this.options.fontSizeMin + this.options.fontSizeMax) / 2;
+      }
     }
     else {
       var scale = (this.options.radiusMax - this.options.radiusMin) / (max - min);
-      this.options.radius= (this.value - min) * scale + this.options.radiusMin;
+      var fontScale = (this.options.fontSizeMax - this.options.fontSizeMin) / (max - min);
+      if (this.options.scaleFontWithValue == true) {
+        this.options.fontSize = Math.max(this.options.fontSizeMin ,(this.value - min) * fontScale + this.options.fontSizeMin);
+      }
+      this.options.radius= Math.max(this.options.radiusMin,(this.value - min) * scale + this.options.radiusMin); // max function is protection against value = 0
     }
   }
+
   this.baseRadiusValue = this.options.radius;
 };
 
@@ -1015,12 +1020,29 @@ Node.prototype._drawText = function (ctx) {
 
 
 Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
-  if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) {
-    ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
+  var relativeFontSize = Number(this.options.fontSize) * this.networkScale;
+  if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) {
+    var fontSize = Number(this.options.fontSize);
+
+    // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
+    if (relativeFontSize >= this.options.fontSizeMaxVisible) {
+      fontSize = Number(this.options.fontSizeMaxVisible) * this.networkScaleInv;
+    }
+
+    // fade in when relative scale is between threshold and threshold - 1
+    var fontColor = this.options.fontColor || "#000000";
+    var strokecolor = this.options.fontStrokeColor;
+    if (relativeFontSize <= this.options.fontDrawThreshold) {
+      var opacity = Math.max(0,Math.min(1,1 - (this.options.fontDrawThreshold - relativeFontSize)));
+      fontColor   = util.overrideOpacity(fontColor,   opacity);
+      strokecolor = util.overrideOpacity(strokecolor, opacity);
+
+    }
+
+    ctx.font = (this.selected ? "bold " : "") + fontSize + "px " + this.options.fontFace;
 
     var lines = text.split('\n');
     var lineCount = lines.length;
-    var fontSize = Number(this.options.fontSize);
     var yLine = y + (1 - lineCount) / 2 * fontSize;
     if (labelUnderNode == true) {
       yLine = y + (1 - lineCount) / (2 * fontSize);
@@ -1032,7 +1054,7 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
       var lineWidth = ctx.measureText(lines[i]).width;
       width = lineWidth > width ? lineWidth : width;
     }
-    var height = this.options.fontSize * lineCount;
+    var height = fontSize * lineCount;
     var left = x - width / 2;
     var top = y - height / 2;
     if (baseline == "hanging") {
@@ -1049,12 +1071,12 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
     }
 
     // draw text
-    ctx.fillStyle = this.options.fontColor || "black";
+    ctx.fillStyle = fontColor;
     ctx.textAlign = align || "center";
     ctx.textBaseline = baseline || "middle";
     if (this.options.fontStrokeWidth > 0){
       ctx.lineWidth   = this.options.fontStrokeWidth;
-      ctx.strokeStyle = this.options.fontStrokeColor;
+      ctx.strokeStyle = strokecolor;
       ctx.lineJoin    = 'round';
     }
     for (var i = 0; i < lineCount; i++) {
@@ -1070,10 +1092,14 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
 
 Node.prototype.getTextSize = function(ctx) {
   if (this.label !== undefined) {
-    ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
+    var fontSize = Number(this.options.fontSize);
+    if (fontSize * this.networkScale > this.options.fontSizeMaxVisible) {
+      fontSize = Number(this.options.fontSizeMaxVisible) * this.networkScaleInv;
+    }
+    ctx.font = (this.selected ? "bold " : "") + fontSize + "px " + this.options.fontFace;
 
     var lines = this.label.split('\n'),
-        height = (Number(this.options.fontSize) + 4) * lines.length,
+        height = (fontSize + 4) * lines.length,
         width = 0;
 
     for (var i = 0, iMax = lines.length; i < iMax; i++) {
diff --git a/lib/network/mixins/ClusterMixin.js b/lib/network/mixins/ClusterMixin.js
index 3c40745b..f3a33587 100644
--- a/lib/network/mixins/ClusterMixin.js
+++ b/lib/network/mixins/ClusterMixin.js
@@ -17,7 +17,7 @@ exports.startWithClustering = function() {
 
  // this is called here because if clusterin is disabled, the start and stabilize are called in
  // the setData function.
- if (this.stabilize) {
+ if (this.constants.stabilize == true) {
    this._stabilize();
  }
  this.start();
@@ -32,24 +32,22 @@ exports.startWithClustering = function() {
 exports.clusterToFit = function(maxNumberOfNodes, reposition) {
   var numberOfNodes = this.nodeIndices.length;
 
-  var maxLevels = 2;
+  var maxLevels = 50;
   var level = 0;
 
   // we first cluster the hubs, then we pull in the outliers, repeat
   while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
-    console.log("Performing clustering:", level, numberOfNodes, this.clusterSession);
     if (level % 3 == 0.0) {
-      //this.forceAggregateHubs(true);
-      //this.normalizeClusterLevels();
+      this.forceAggregateHubs(true);
+      this.normalizeClusterLevels();
     }
     else {
-      //this.increaseClusterLevel(); // this also includes a cluster normalization
+      this.increaseClusterLevel(); // this also includes a cluster normalization
     }
-    //this.forceAggregateHubs(true);
+    this.forceAggregateHubs(true);
     numberOfNodes = this.nodeIndices.length;
     level += 1;
   }
-  console.log("finished")
 
   // after the clustering we reposition the nodes to reduce the initial chaos
   if (level > 0 && reposition == true) {
@@ -59,7 +57,7 @@ exports.clusterToFit = function(maxNumberOfNodes, reposition) {
 };
 
 /**
- * This function can be called to open up a specific cluster. It is only called by
+ * This function can be called to open up a specific cluster.
  * It will unpack the cluster back one level.
  *
  * @param node    | Node object: cluster to open.
@@ -82,9 +80,8 @@ exports.openCluster = function(node) {
   else {
     this._expandClusterNode(node,false,true);
 
-    // update the index list, dynamic edges and labels
+    // update the index list and labels
     this._updateNodeIndexList();
-    this._updateDynamicEdges();
     this._updateCalculationNodes();
     this.updateLabels();
   }
@@ -142,18 +139,21 @@ exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
   var isMovingBeforeClustering = this.moving;
   var amountOfNodes = this.nodeIndices.length;
 
+  var detectedZoomingIn = (this.previousScale < this.scale && zoomDirection == 0);
+  var detectedZoomingOut = (this.previousScale > this.scale && zoomDirection == 0);
+
   // on zoom out collapse the sector if the scale is at the level the sector was made
-  if (this.previousScale > this.scale && zoomDirection == 0) {
+  if (detectedZoomingOut == true) {
     this._collapseSector();
   }
 
   // check if we zoom in or out
-  if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
+  if (detectedZoomingOut == true || zoomDirection == -1) { // zoom out
     // forming clusters when forced pulls outliers in. When not forced, the edge length of the
     // outer nodes determines if it is being clustered
     this._formClusters(force);
   }
-  else if (this.previousScale < this.scale || zoomDirection == 1) { // zoom in
+  else if (detectedZoomingIn == true || zoomDirection == 1) { // zoom in
     if (force == true) {
       // _openClusters checks for each node if the formationScale of the cluster is smaller than
       // the current scale and if so, declusters. When forced, all clusters are reduced by one step
@@ -161,27 +161,27 @@ exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
     }
     else {
       // if a cluster takes up a set percentage of the active window
-      this._openClustersBySize();
+      //this._openClustersBySize();
+      this._openClusters(recursive, false);
     }
   }
   this._updateNodeIndexList();
 
   // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
-  if (this.nodeIndices.length == amountOfNodes && (this.previousScale > this.scale || zoomDirection == -1))  {
+  if (this.nodeIndices.length == amountOfNodes && (detectedZoomingOut == true || zoomDirection == -1))  {
     this._aggregateHubs(force);
     this._updateNodeIndexList();
   }
 
   // we now reduce chains.
-  if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
+  if (detectedZoomingOut == true || zoomDirection == -1) { // zoom out
     this.handleChains();
     this._updateNodeIndexList();
   }
 
   this.previousScale = this.scale;
 
-  // rest of the update the index list, dynamic edges and labels
-  this._updateDynamicEdges();
+  // update labels
   this.updateLabels();
 
   // if a cluster was formed, we increase the clusterSession
@@ -237,10 +237,10 @@ exports.forceAggregateHubs = function(doNotStart) {
 
   // update the index list, dynamic edges and labels
   this._updateNodeIndexList();
-  this._updateCalculationNodes();
-  this._updateDynamicEdges();
   this.updateLabels();
 
+  this._updateCalculationNodes();
+
   // if a cluster was formed, we increase the clusterSession
   if (this.nodeIndices.length != amountOfNodes) {
     this.clusterSession += 1;
@@ -260,13 +260,15 @@ exports.forceAggregateHubs = function(doNotStart) {
  * @private
  */
 exports._openClustersBySize = function() {
-  for (var nodeId in this.nodes) {
-    if (this.nodes.hasOwnProperty(nodeId)) {
-      var node = this.nodes[nodeId];
-      if (node.inView() == true) {
-        if ((node.width*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
-            (node.height*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
-          this.openCluster(node);
+  if (this.constants.clustering.clusterByZoom == true) {
+    for (var nodeId in this.nodes) {
+      if (this.nodes.hasOwnProperty(nodeId)) {
+        var node = this.nodes[nodeId];
+        if (node.inView() == true) {
+          if ((node.width * this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
+            (node.height * this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
+            this.openCluster(node);
+          }
         }
       }
     }
@@ -302,12 +304,12 @@ exports._openClusters = function(recursive,force) {
 exports._expandClusterNode = function(parentNode, recursive, force, openAll) {
   // first check if node is a cluster
   if (parentNode.clusterSize > 1) {
-    // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
-    if (parentNode.clusterSize < this.constants.clustering.sectorThreshold) {
-      openAll = true;
+    if (openAll === undefined) {
+      openAll = false;
     }
-    recursive = openAll ? true : recursive;
+    // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
 
+    recursive = openAll || recursive;
     // if the last child has been added on a smaller scale than current scale decluster
     if (parentNode.formationScale < this.scale || force == true) {
       // we will check if any of the contained child nodes should be removed from the cluster
@@ -373,7 +375,6 @@ exports._expelChildFromParent = function(parentNode, containedNodeId, recursive,
     parentNode.options.mass -= childNode.options.mass;
     parentNode.clusterSize -= childNode.clusterSize;
     parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*(parentNode.clusterSize-1));
-    parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
 
     // place the child node near the parent, not at the exact same location to avoid chaos in the system
     childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
@@ -441,7 +442,9 @@ exports._repositionBezierNodes = function(node) {
  */
 exports._formClusters = function(force) {
   if (force == false) {
-    this._formClustersByZoom();
+    if (this.constants.clustering.clusterByZoom == true) {
+      this._formClustersByZoom();
+    }
   }
   else {
     this._forceClustersByZoom();
@@ -455,8 +458,8 @@ exports._formClusters = function(force) {
  * @private
  */
 exports._formClustersByZoom = function() {
-  var dx,dy,length,
-      minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+  var dx,dy,length;
+  var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
 
   // check if any edges are shorter than minLength and start the clustering
   // the clustering favours the node with the larger mass
@@ -479,10 +482,10 @@ exports._formClustersByZoom = function() {
               childNode = edge.from;
             }
 
-            if (childNode.dynamicEdgesLength == 1) {
+            if (childNode.dynamicEdges.length == 1) {
               this._addToCluster(parentNode,childNode,false);
             }
-            else if (parentNode.dynamicEdgesLength == 1) {
+            else if (parentNode.dynamicEdges.length == 1) {
               this._addToCluster(childNode,parentNode,false);
             }
           }
@@ -505,8 +508,7 @@ exports._forceClustersByZoom = function() {
       var childNode = this.nodes[nodeId];
 
       // the edges can be swallowed by another decrease
-
-      if (childNode.dynamicEdgesLength == 1 && childNode.dynamicEdges.length != 0) {
+      if (childNode.dynamicEdges.length == 1) {
         var edge = childNode.dynamicEdges[0];
         var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
         // group to the largest node
@@ -588,14 +590,13 @@ exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSize
   if (absorptionSizeOffset === undefined) {
     absorptionSizeOffset = 0;
   }
-
-  if (hubNode.dynamicEdgesLength < 0) {
-    console.error(hubNode.dynamicEdgesLength, this.hubThreshold, onlyEqual)
-  }
+  //this.hubThreshold = 43
+  //if (hubNode.dynamicEdgesLength < 0) {
+  // console.error(hubNode.dynamicEdgesLength, this.hubThreshold, onlyEqual)
+  //}
   // we decide if the node is a hub
-  if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
-    (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
-
+  if ((hubNode.dynamicEdges.length >= this.hubThreshold && onlyEqual == false) ||
+    (hubNode.dynamicEdges.length == this.hubThreshold && onlyEqual == true)) {
     // initialize variables
     var dx,dy,length;
     var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
@@ -651,8 +652,13 @@ exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSize
         if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
           (childNode.id != hubNode.id)) {
           this._addToCluster(hubNode,childNode,force);
+
+        }
+        else {
+          //console.log("WILL NOT MERGE:",childNode.dynamicEdges.length , (this.hubThreshold + absorptionSizeOffset))
         }
       }
+
     }
   }
 };
@@ -730,40 +736,6 @@ exports._addToCluster = function(parentNode, childNode, force) {
 };
 
 
-/**
- * This function will apply the changes made to the remainingEdges during the formation of the clusters.
- * This is a seperate function to allow for level-wise collapsing of the node barnesHutTree.
- * It has to be called if a level is collapsed. It is called by _formClusters().
- * @private
- */
-exports._updateDynamicEdges = function() {
-  for (var i = 0; i < this.nodeIndices.length; i++) {
-    var node = this.nodes[this.nodeIndices[i]];
-    node.dynamicEdgesLength = node.dynamicEdges.length;
-
-    // this corrects for multiple edges pointing at the same other node
-    var correction = 0;
-    if (node.dynamicEdgesLength > 1) {
-      for (var j = 0; j < node.dynamicEdgesLength - 1; j++) {
-        var edgeToId = node.dynamicEdges[j].toId;
-        var edgeFromId = node.dynamicEdges[j].fromId;
-        for (var k = j+1; k < node.dynamicEdgesLength; k++) {
-          if ((node.dynamicEdges[k].toId == edgeToId && node.dynamicEdges[k].fromId == edgeFromId) ||
-              (node.dynamicEdges[k].fromId == edgeToId && node.dynamicEdges[k].toId == edgeFromId)) {
-            correction += 1;
-          }
-        }
-      }
-    }
-    if (node.dynamicEdgesLength < correction) {
-      console.error("overshoot", node.dynamicEdgesLength, correction)
-    }
-
-    node.dynamicEdgesLength -= correction;
-  }
-};
-
-
 /**
  * This adds an edge from the childNode to the contained edges of the parent node
  *
@@ -774,7 +746,7 @@ exports._updateDynamicEdges = function() {
  */
 exports._addToContainedEdges = function(parentNode, childNode, edge) {
   // create an array object if it does not yet exist for this childNode
-  if (!(parentNode.containedEdges.hasOwnProperty(childNode.id))) {
+  if (parentNode.containedEdges[childNode.id] === undefined) {
     parentNode.containedEdges[childNode.id] = []
   }
   // add this edge to the list
@@ -813,7 +785,6 @@ exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
       edge.toId = parentNode.id;
     }
     else {          // edge connected to other node with the "from" side
-
       edge.originalFromId.push(childNode.id);
       edge.from = parentNode;
       edge.fromId = parentNode.id;
@@ -989,7 +960,7 @@ exports.updateLabels = function() {
 //    for (nodeId in this.nodes) {
 //      if (this.nodes.hasOwnProperty(nodeId)) {
 //        node = this.nodes[nodeId];
-//        node.label = String(node.level);
+//        node.label = String(node.clusterSize + ":" + node.dynamicEdges.length);
 //      }
 //    }
 
@@ -1029,7 +1000,6 @@ exports.normalizeClusterLevels = function() {
       }
     }
     this._updateNodeIndexList();
-    this._updateDynamicEdges();
     // if a cluster was formed, we increase the clusterSession
     if (this.nodeIndices.length != amountOfNodes) {
       this.clusterSession += 1;
@@ -1090,11 +1060,11 @@ exports._getHubSize = function() {
   for (var i = 0; i < this.nodeIndices.length; i++) {
 
     var node = this.nodes[this.nodeIndices[i]];
-    if (node.dynamicEdgesLength > largestHub) {
-      largestHub = node.dynamicEdgesLength;
+    if (node.dynamicEdges.length > largestHub) {
+      largestHub = node.dynamicEdges.length;
     }
-    average += node.dynamicEdgesLength;
-    averageSquared += Math.pow(node.dynamicEdgesLength,2);
+    average += node.dynamicEdges.length;
+    averageSquared += Math.pow(node.dynamicEdges.length,2);
     hubCounter += 1;
   }
   average = average / hubCounter;
@@ -1128,7 +1098,7 @@ exports._reduceAmountOfChains = function(fraction) {
   var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
   for (var nodeId in this.nodes) {
     if (this.nodes.hasOwnProperty(nodeId)) {
-      if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
+      if (this.nodes[nodeId].dynamicEdges.length == 2) {
         if (reduceAmount > 0) {
           this._formClusterFromHub(this.nodes[nodeId],true,true,1);
           reduceAmount -= 1;
@@ -1149,7 +1119,7 @@ exports._getChainFraction = function() {
   var total = 0;
   for (var nodeId in this.nodes) {
     if (this.nodes.hasOwnProperty(nodeId)) {
-      if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
+      if (this.nodes[nodeId].dynamicEdges.length == 2) {
         chains += 1;
       }
       total += 1;
diff --git a/lib/network/mixins/HierarchicalLayoutMixin.js b/lib/network/mixins/HierarchicalLayoutMixin.js
index a49ffba4..4d4cd54e 100644
--- a/lib/network/mixins/HierarchicalLayoutMixin.js
+++ b/lib/network/mixins/HierarchicalLayoutMixin.js
@@ -42,7 +42,7 @@ exports._setupHierarchicalLayout = function() {
     // if the user defined some levels but not all, alert and run without hierarchical layout
     if (undefinedLevel == true && definedLevel == true) {
       throw new Error("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
-      this.zoomExtent(undefined,true,this.constants.clustering.enabled);
+      this.zoomExtent({duration:0},true,this.constants.clustering.enabled);
       if (!this.constants.clustering.enabled) {
         this.start();
       }
diff --git a/lib/network/mixins/physics/PhysicsMixin.js b/lib/network/mixins/physics/PhysicsMixin.js
index f04e9e95..c17cacf7 100644
--- a/lib/network/mixins/physics/PhysicsMixin.js
+++ b/lib/network/mixins/physics/PhysicsMixin.js
@@ -325,6 +325,9 @@ exports._loadPhysicsConfiguration = function () {
     this.backupConstants = {};
     util.deepExtend(this.backupConstants,this.constants);
 
+    var maxGravitational = Math.max(20000, (-1 * this.constants.physics.barnesHut.gravitationalConstant) * 10);
+    var maxSpring = Math.min(0.05, this.constants.physics.barnesHut.springConstant * 10)
+
     var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
     this.physicsConfiguration = document.createElement('div');
     this.physicsConfiguration.className = "PhysicsConfiguration";
@@ -339,16 +342,16 @@ exports._loadPhysicsConfiguration = function () {
       '<table id="graph_BH_table" style="display:none">' +
       '<tr><td><b>Barnes Hut</b></td></tr>' +
       '<tr>' +
-      '<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="0" max="20000" value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" step="25" style="width:300px" id="graph_BH_gc"></td><td  width="50px">-20000</td><td><input value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" id="graph_BH_gc_value" style="width:60px"></td>' +
+      '<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="0" max="'+maxGravitational+'" value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" step="25" style="width:300px" id="graph_BH_gc"></td><td  width="50px">-'+maxGravitational+'</td><td><input value="' + (this.constants.physics.barnesHut.gravitationalConstant) + '" id="graph_BH_gc_value" style="width:60px"></td>' +
       '</tr>' +
       '<tr>' +
-      '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3"  value="' + this.constants.physics.barnesHut.centralGravity + '" step="0.05"  style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this.constants.physics.barnesHut.centralGravity + '" id="graph_BH_cg_value" style="width:60px"></td>' +
+      '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="6"  value="' + this.constants.physics.barnesHut.centralGravity + '" step="0.05"  style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this.constants.physics.barnesHut.centralGravity + '" id="graph_BH_cg_value" style="width:60px"></td>' +
       '</tr>' +
       '<tr>' +
       '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.barnesHut.springLength + '" step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="' + this.constants.physics.barnesHut.springLength + '" id="graph_BH_sl_value" style="width:60px"></td>' +
       '</tr>' +
       '<tr>' +
-      '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.barnesHut.springConstant + '" step="0.001" style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.barnesHut.springConstant + '" id="graph_BH_sc_value" style="width:60px"></td>' +
+      '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="'+maxSpring+'" value="' + this.constants.physics.barnesHut.springConstant + '" step="0.0001" style="width:300px" id="graph_BH_sc"></td><td>'+maxSpring+'</td><td><input value="' + this.constants.physics.barnesHut.springConstant + '" id="graph_BH_sc_value" style="width:60px"></td>' +
       '</tr>' +
       '<tr>' +
       '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.barnesHut.damping + '" step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.barnesHut.damping + '" id="graph_BH_damp_value" style="width:60px"></td>' +
diff --git a/lib/util.js b/lib/util.js
index 965ba1e8..5245768c 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -757,6 +757,28 @@ exports.hexToRGB = function(hex) {
   } : null;
 };
 
+/**
+ * This function takes color in hex format or rgb() or rgba() format and overrides the opacity. Returns rgba() string.
+ * @param color
+ * @param opacity
+ * @returns {*}
+ */
+exports.overrideOpacity = function(color,opacity) {
+  if (color.indexOf("rgb") != -1) {
+    var rgb = color.substr(color.indexOf("(")+1).replace(")","").split(",");
+    return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + opacity + ")"
+  }
+  else {
+    var rgb = exports.hexToRGB(color);
+    if (rgb == null) {
+      return color;
+    }
+    else {
+      return "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ")"
+    }
+  }
+}
+
 /**
  *
  * @param red     0 -- 255
diff --git a/test/EU/js/init_precalc.js b/test/EU/js/init_precalc.js
new file mode 100644
index 00000000..1a71ce92
--- /dev/null
+++ b/test/EU/js/init_precalc.js
@@ -0,0 +1,291 @@
+function focusOn(event) {
+  var nodeId = event.value;
+  network.selectNodes([nodeId]);
+  highlightConnections({nodes:[nodeId]})
+  network.focusOnNode(nodeId,{animation:false, scale:0.2})
+}
+
+function viewAllNeighbours() {
+  network.zoomExtent({nodes:connectedNodes, duration:0})
+}
+
+function doSteps(amount) {
+  network.setOptions({stabilizationIterations:amount})
+  network._stabilize()
+}
+
+var network;
+var nodes;
+var edges;
+var edgeOpacity = 0.15;
+
+function drawAll(dataJSON, file) {
+// create an array with nodes
+  nodes = new vis.DataSet(dataJSON.nodes);
+
+  var totalMass = 0;
+
+  for (var i = 0; i < dataJSON.nodes.length; i++) {
+    totalMass += dataJSON.nodes[i].mass;
+    //console.log(dataJSON.nodes[i].mass)
+  }
+
+  var gravityConstant = -20000;
+  if (totalMass < 2000) {
+    gravityConstant = -2000;
+  }
+
+  var edgeNodeRatio = Math.max(1,dataJSON.edges.length) / Math.max(1,dataJSON.nodes.length);
+  var nodeEdgeRatio = Math.max(1,dataJSON.nodes.length) / Math.max(1,dataJSON.edges.length);
+  var centralGravity = Math.min(5,Math.max(0.1,edgeNodeRatio));
+  opacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio));
+
+// create an array with edges
+  edges = new vis.DataSet(dataJSON.edges);
+
+//  console.log(edgesArray.length,edgesArray)
+
+// create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+
+  var amountOfNodes = dataJSON.nodes.length;
+  var options = {
+    stabilize: true,
+    stabilizationIterations: 15000,
+    smoothCurves: {
+      enabled: false,
+      dynamic: false
+    },
+    configurePhysics: false,
+    physics: {barnesHut: {gravitationalConstant: gravityConstant, centralGravity: centralGravity, springLength: 100, springConstant: 0.001}},
+    //physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0.0, springConstant: 0}},
+    nodes: {
+      shape: 'dot',
+      radiusMax: amountOfNodes * 0.5,
+      fontColor: '#ffffff',
+      fontDrawThreshold: 8,
+      scaleFontWithValue: true,
+      fontSizeMin: 14,
+      fontSizeMax: amountOfNodes * 0.25,
+      fontSizeMaxVisible: 20,
+      fontStrokeWidth: 1, // px
+      fontStrokeColor: '#222222'
+    },
+    edges: {
+      opacity: edgeOpacity
+    },
+    hideEdgesOnDrag: true,
+    maxVelocity: 100,
+    tooltip: {
+      delay: 200,
+      fontSize: 12,
+      color: {
+        background: "#fff"
+      }
+    }
+  };
+  network = new vis.Network(container, {nodes:[],edges:[]}, options);
+
+  network.on("stabilizationIterationsDone", function() {
+    this.setFreezeSimulation(true);
+  });
+
+  network.on("stabilized", function() {
+    console.log('downloading')
+    network.storePositions();
+    download(file);
+    setTimeout(getNewTask(file),3000);
+  })
+
+  network.setData(data);
+
+  if (dataJSON.nodes.length < 2) {
+    console.log('downloading because few nodes')
+    network.storePositions();
+    download(file);
+    setTimeout(getNewTask(file),3000);
+  }
+
+  //network.on("click", highlightConnections);
+  //window.onresize = function () {
+  //  network.redraw()
+  //};
+  //network.on("stabilized", function() {
+  //  network.setOptions({physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0, springConstant: 0}}});
+  //  console.log('downlaoding')
+  //  download();
+  //  setTimeout(next,2000);
+  //});
+
+  //populateCompanyDropdown();
+}
+// marked is used so we don't do heavy stuff on each click
+var marked = false;
+var connectedNodes = [];
+function highlightConnections(selectedItems) {
+  var nodeId;
+  var requireUpdate = false;
+
+  // we get all data from the dataset once to avoid updating multiple times.
+  if (selectedItems.nodes.length == 0 && marked === true) {
+    connectedNodes = [];
+    requireUpdate = true;
+    var allNodes = nodes.get({returnType:"Object"});
+    // restore on unselect
+    for (nodeId in allNodes) {
+      allNodes[nodeId].color = undefined;
+      if (allNodes[nodeId].oldLabel !== undefined) {
+        allNodes[nodeId].label = allNodes[nodeId].oldLabel;
+        allNodes[nodeId].oldLabel = undefined;
+      }
+    }
+    marked = false;
+    network.setOptions({nodes:{fontSizeMin:14},edges:{opacity:0.15}})
+  }
+  else if (selectedItems.nodes.length > 0) {
+    var allNodes = nodes.get({returnType:"Object"});
+
+    marked = true;
+    requireUpdate = true;
+
+    var mainNode = selectedItems.nodes[0]; // this is an ID
+    connectedNodes = network.getConnectedNodes(mainNode);
+    connectedNodes.push(mainNode);
+
+    for (nodeId in allNodes) {
+      allNodes[nodeId].color = 'rgba(150,150,150,0.1)';
+      if (allNodes[nodeId].oldLabel === undefined) {
+        allNodes[nodeId].oldLabel = allNodes[nodeId].label;
+        allNodes[nodeId].label = "";
+      }
+    }
+
+    for (var i = 0; i < connectedNodes.length; i++) {
+        allNodes[connectedNodes[i]].color = undefined;
+        if (allNodes[connectedNodes[i]].oldLabel !== undefined) {
+            allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].oldLabel;
+            allNodes[connectedNodes[i]].oldLabel = undefined;
+        }
+    }
+
+    network.setOptions({nodes:{fontSizeMin:150},edges:{opacity:0.025}})
+  }
+
+  if (requireUpdate === true) {
+    var updateArray = [];
+    for (nodeId in allNodes) {
+      updateArray.push(allNodes[nodeId]);
+    }
+    nodes.update(updateArray);
+  }
+}
+
+function loadJSON(path, success, error) {
+  var xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        success(JSON.parse(xhr.responseText), path);
+      }
+      else {
+        error();
+      }
+    }
+  };
+  xhr.open("GET", path, true);
+
+  xhr.send();
+}
+
+
+function populateDropdown() {
+  var nodesAr = nodes.get();
+  var nodeIds = [];
+  for (var i = 0; i < nodesAr.length;i++) {
+    nodeIds.push(nodesAr[i].id);
+  }
+  nodeIds.sort()
+  var dropdown = document.getElementById("companyDropdown");
+  var option = document.createElement('option');
+  option.text = option.value = 'pick a company to focus on.';
+  dropdown.add(option);
+  for (i = 0; i < nodeIds.length; i++) {
+    option = document.createElement('option');
+    option.text = option.value = nodeIds[i];
+    dropdown.add(option);
+  }
+}
+
+function download(path) {
+  var file = path.replace("./data/data/","");
+  var nodesAr = nodes.get();
+  var edgesAr = edges.get();
+  var obj =  {nodes: nodesAr, edges: edgesAr};
+  var json = JSON.stringify(obj);
+  var blob = new Blob([json], {type: "text/plain;charset=utf-8"});
+  saveAs(blob, "processed_" + file);
+}
+
+function startTask(path, success) {
+  // if we find the file already processed, we go to the next one
+  loadJSON("./data/processedData/processed_" + path,
+    function() {
+      getNewTask(path);
+    },
+    function() {
+      loadJSON("./data/data/" + path, success, function() {
+        console.log("could not find file ", path);
+      })
+  });
+}
+
+function askAgent(to, message) {
+  return new Promise(function (resolve, reject) {
+    if (typeof message == 'object') {
+      message = JSON.stringify(message);
+    }
+    // create XMLHttpRequest object to send the POST request
+    var http = new XMLHttpRequest();
+
+    // insert the callback function. This is called when the message has been delivered and a response has been received
+    http.onreadystatechange = function () {
+      if (http.readyState == 4 && http.status == 200) {
+        var response = "";
+        if (http.responseText.length > 0) {
+          response = JSON.parse(http.responseText);
+        }
+        resolve(response);
+      }
+      else if (http.readyState == 4) {
+        reject(new Error("http.status:" + http.status));
+      }
+    };
+
+    // open an asynchronous POST connection
+    http.open("POST", to, true);
+    // include header so the receiving code knows its a JSON object
+    http.setRequestHeader("Content-Type", "text/plain");
+    // send
+    http.send(message);
+  });
+}
+
+
+function getNewTask(path) {
+  var file = undefined;
+  if (path !== undefined) {
+    file = path.replace("./data/data/", "");
+  }
+  askAgent("http://127.0.0.1:3000/agents/proxy", {jsonrpc:"2.0",method:"getAssignment", params:{finishedFile:file}}).then(function(reply) {
+    console.log(reply, reply.result);
+    if (reply.result != 'none') {
+      startTask(reply.result, function(data,path) {document.getElementById("FILENAME").innerHTML = path; setTimeout(function() {drawAll(data,path);},200)});
+    }
+  })
+}
+
+getNewTask()
\ No newline at end of file